diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 803b18e4..f396b81c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "bulma": "^0.9.4",
         "react": "^18.2.0",
+        "react-calendar": "^4.8.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
         "react-router-dom": "^6.22.2"
@@ -1224,17 +1225,30 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+    },
+    "node_modules/@types/lodash.memoize": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.memoize/-/lodash.memoize-4.1.9.tgz",
+      "integrity": "sha512-glY1nQuoqX4Ft8Uk+KfJudOD7DQbbEDF6k9XpGncaohW3RW4eSWBlx6AA0fZCrh40tZcQNH4jS/Oc59J6Eq+aw==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.61",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.61.tgz",
       "integrity": "sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1254,7 +1268,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -1477,6 +1491,14 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/@wojtekmaj/date-utils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz",
+      "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/date-utils?sponsor=1"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1806,6 +1828,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1851,7 +1881,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2718,6 +2748,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-user-locale": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.1.tgz",
+      "integrity": "sha512-VEvcsqKYx7zhZYC1CjecrDC5ziPSpl1gSm0qFFJhHSGDrSC+x4+p1KojWC/83QX//j476gFhkVXP/kNUc9q+bQ==",
+      "dependencies": {
+        "@types/lodash.memoize": "^4.1.7",
+        "lodash.memoize": "^4.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -3434,6 +3476,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3537,7 +3584,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3817,7 +3863,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3864,6 +3909,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-calendar": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-4.8.0.tgz",
+      "integrity": "sha512-qFgwo+p58sgv1QYMI1oGNaop90eJVKuHTZ3ZgBfrrpUb+9cAexxsKat0sAszgsizPMVo7vOXedV7Lqa0GQGMvA==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.1.3",
+        "clsx": "^2.0.0",
+        "get-user-locale": "^2.2.1",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -3887,8 +3957,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.0",
@@ -4610,6 +4679,14 @@
         }
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4726,4 +4803,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/package.json b/frontend/package.json
index 4397c832..5972459f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "bulma": "^0.9.4",
     "react": "^18.2.0",
+    "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.2"
@@ -29,4 +30,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.1.4"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/CreateProject.tsx b/frontend/src/components/CreateProject.tsx
new file mode 100644
index 00000000..690773ad
--- /dev/null
+++ b/frontend/src/components/CreateProject.tsx
@@ -0,0 +1,169 @@
+import {JSX, useState} from "react";
+import Inputfield from "./Inputfield.tsx";
+import {SelectionBox} from "./SelectionBox.tsx";
+import Calendar from "react-calendar";
+import 'react-calendar/dist/Calendar.css';
+import {FaUpload} from "react-icons/fa";
+import "../assets/styles/small_components.css";
+
+
+export function CreateProject(): JSX.Element {
+    const [showCalender, setCalender] = useState(false);
+    type ValuePiece = Date | null; // nodig voor de deadline
+    type Value = ValuePiece | [ValuePiece, ValuePiece]; // nodig voor de deadline
+    const [deadlineValue, deadlineChange] = useState<Value>(new Date());
+    const [description, setDescription] = useState('');
+    const [showGroup, setGroup] = useState(false);
+
+    const expandDeadline = () => {
+        setCalender(!showCalender);
+    };
+
+    const expandGroup = () => {
+        setGroup(!showGroup);
+    };
+
+    const hours = Array.from({length: 24}, (_, index) => index.toString().padStart(2, '0'));
+    const minutes = Array.from({length: 60}, (_, index) => index.toString().padStart(2, '0'));
+
+
+    return (
+        <>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Project naam:</label>
+                </div>
+                <div className="field-body field">
+                    <Inputfield placeholder="Geef een naam in"/>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Vak:</label>
+                </div>
+                <div className="field-body field">
+                    <SelectionBox options={["vak1", "vak2", "vak3"]}/>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Deadline:</label>
+                </div>
+                <div className="field-body">
+                    <label>
+                        <input type="checkbox" onChange={expandDeadline}/>
+                        {showCalender &&
+                            <>
+                                <Calendar onChange={e => deadlineChange(e)} value={deadlineValue}/>
+                                <div className="is-horizontal field">
+                                    <SelectionBox options={hours}/>
+                                    <label className={"title ml-3 mr-3"}>:</label>
+                                    <SelectionBox options={minutes}/>
+                                </div>
+                            </>
+                        }
+                    </label>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Beschrijving:</label>
+                </div>
+                <div className="field-body field">
+                    <div style={{width: "33%"}}> {/* Deze moet er blijven, anders doet css raar*/}
+                        <textarea className="textarea" placeholder="Optionele beschrijving van het project"
+                                  value={description}
+                                  onChange={e => setDescription(e.target.value)}/>
+                    </div>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Docker file:</label>
+                </div>
+                <div className="field-body field file has-name">
+                    <label className="file-label">
+                        <input className="file-input" type="file" name="resume"/>
+                        <span className="file-cta">
+                            <span className="file-icon">
+                                <FaUpload/>
+                            </span>
+                            <span className="file-label">
+                                Kies een bestand
+                            </span>
+                        </span>
+                        <span className="file-name">
+                            C:\home\files\docker_file.dockerfile
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Indiening files:</label>
+                </div>
+                <div className="field-body field">
+                    <div className="field"> {/* Deze moet er blijven, anders doet css raar*/}
+                        <label>Specifieer welke files de ingediende zip moet bevatten. Splits per komma.</label>
+                        <br/>
+                        <Inputfield placeholder="vb: diagram.dgr,verslag.pdf,textbestand.txt"/>
+                        <br/>
+                        <div className="field is-horizontal">
+                            <div className="field-label">
+                                <input type="checkbox"/> {/*TODO doe iets*/}
+                            </div>
+                            <div className="field-body">
+                                <label className="label is-fullwidth">ook andere files toegelaten</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Groepswerk:</label>
+                </div>
+                <div className="field-body">
+                    <label>
+                        <input type="checkbox" onChange={expandGroup}/>
+                        {showGroup &&
+                            <>
+                                <div className="field is-horizontal">
+                                    <div className="field-label">
+                                        <input type="checkbox"/>
+                                    </div>
+                                    <div className="field-body">
+                                        <label className="label is-fullwidth">verwisselingen toestaan</label>
+                                    </div>
+                                </div>
+                                <br/>
+                                <div className="field-label">
+                                    <label className="label is-fullwidth">Groepsindeling (kies 1 van
+                                        onderstaande):</label>
+                                </div>
+                                <br/>
+                                <div className="field-body field is-horizontal">
+                                    <div className="field-label">
+                                        <input type="checkbox"/>
+                                    </div>
+                                    <div className="field-body">
+                                        <label className="label is-fullwidth">random</label>
+                                    </div>
+                                </div>
+                                <div className="field is-horizontal">
+                                    <div className="field-label">
+                                        <input type="checkbox"/>
+                                    </div>
+                                    <div className="field-body">
+                                        <label className="label is-fullwidth">studenten kiezen zelf</label>
+                                    </div>
+                                </div>
+                            </>
+                        }
+                    </label>
+                </div>
+            </div>
+        </>
+    )
+        ;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FieldWithLabel.tsx b/frontend/src/components/FieldWithLabel.tsx
new file mode 100644
index 00000000..7d6a1e40
--- /dev/null
+++ b/frontend/src/components/FieldWithLabel.tsx
@@ -0,0 +1,14 @@
+import {JSX} from "react";
+
+export default function FieldWithLabel(props: { fieldLabel: string, fieldBody: string, arrow: boolean }): JSX.Element {
+    return (
+        <div className="field is-horizontal">
+            <div className="field-label">
+                <label className="label">{props.arrow && "> "} {props.fieldLabel}: </label>
+            </div>
+            <div className="field-body field">
+                <label>{props.fieldBody}</label>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inputfield.tsx b/frontend/src/components/Inputfield.tsx
new file mode 100644
index 00000000..7ccd6ca1
--- /dev/null
+++ b/frontend/src/components/Inputfield.tsx
@@ -0,0 +1,22 @@
+import {ChangeEvent, useState} from 'react';
+
+export default function Inputfield(props: { placeholder: string }) {
+    const [inputValue, setInputValue] = useState('');
+
+    // Event handler to update the input value
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        setInputValue(e.target.value);
+    }
+
+    return (
+        <input
+            style={{width: "33%"}}
+            className={"input is-rounded"}
+            type="text"
+            value={inputValue}
+            onChange={handleChange}
+            placeholder={props.placeholder}
+        />
+    );
+}
+
diff --git a/frontend/src/components/SelectionBox.tsx b/frontend/src/components/SelectionBox.tsx
new file mode 100644
index 00000000..1503ad88
--- /dev/null
+++ b/frontend/src/components/SelectionBox.tsx
@@ -0,0 +1,13 @@
+import {JSX} from "react";
+
+export function SelectionBox(props: { options: string[] }): JSX.Element {
+    return (
+        <div className="select is-rounded">
+            <select>
+                {props.options.map((option) => {
+                    return <option key={option}>{option}</option>
+                })}
+            </select>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/ViewProjectStudent.tsx b/frontend/src/components/ViewProjectStudent.tsx
new file mode 100644
index 00000000..acdfa59f
--- /dev/null
+++ b/frontend/src/components/ViewProjectStudent.tsx
@@ -0,0 +1,106 @@
+import {JSX} from "react";
+import FieldWithLabel from "./FieldWithLabel.tsx";
+import {FaCheck, FaUpload} from "react-icons/fa";
+import {FaDownload} from "react-icons/fa6";
+
+export default function ViewProjectStudent(): JSX.Element {
+    return (
+        <>
+            <FieldWithLabel fieldLabel={"Naam"} fieldBody={"Markov Decision Making"} arrow={true}></FieldWithLabel>
+            <FieldWithLabel fieldLabel={"Vak"} fieldBody={"Automaten, berekenbaarheid en complexiteit"}
+                            arrow={true}></FieldWithLabel>
+            <FieldWithLabel fieldLabel={"Deadline"} fieldBody={"17:00 - 23/02/2024"} arrow={true}></FieldWithLabel>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">{"> "}Status: </label>
+                </div>
+                <div className="field-body field">
+                    <label className={"has-text-danger"}>Failed</label>
+                </div>
+            </div>
+            <FieldWithLabel fieldLabel={"Beschrijving"}
+                            fieldBody={"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel arcu sit amet quam scelerisque vestibulum. Nulla lectus ipsum, convallis ut odio sit amet, auctor dictum felis. Phasellus libero sapien, tempus eu fringilla eu, facilisis vel purus. Quisque odio elit, viverra id tortor eu, blandit luctus turpis. Vestibulum libero felis, condimentum finibus posuere sed, lobortis non tellus. Phasellus laoreet, metus a semper vulputate, mi dui lobortis augue, quis fringilla ipsum felis eu mauris. Donec sem dolor, porta ultrices venenatis eget, ullamcorper id turpis. Nulla quis lacinia sapien. Mauris dignissim nisi id quam vulputate molestie. Fusce eleifend sagittis dolor sit amet aliquam. Aenean in sapien diam. Donec iaculis nunc eu enim pulvinar ultricies. Suspendisse potenti. Etiam quis viverra nunc. Nulla tempus in erat vitae tincidunt. Vestibulum et iaculis nulla. "}
+                            arrow={false}></FieldWithLabel>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Indiening moet bevatten:</label>
+                </div>
+                <div className="field-body">
+                    <div className="field"> {/*Deze moet blijven, anders gaan de elementen in elkaar*/}
+                        <li>Diagram.dgr</li>
+                        <li>verslag.pdf</li>
+                    </div>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Groepsleden(3/4): </label>
+                </div>
+                <div className="field-body field">
+                    <table className={"table is-fullwidth"}>
+                        <thead>
+                        <tr>
+                            <th>Naam</th>
+                            <th>Email</th>
+                            <th>Laatste indiening</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Jan</td>
+                            <td>jan@ugent.be</td>
+                            <td> -</td>
+                        </tr>
+                        <tr>
+                            <td>Peter</td>
+                            <td>peter@ugent.be</td>
+                            <td> -</td>
+                        </tr>
+                        <tr>
+                            <td>Erik</td>
+                            <td>erik@ugent.be</td>
+                            <td><FaCheck/></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div className="field is-horizontal">
+                <div className="field-label">
+                    <label className="label">Indiening(zip)</label>
+                </div>
+                <div className="field-body">
+                    <div className="field"> {/* Deze moet blijven */}
+                        <li className={"mb-3"}>
+                            <label className={"mr-3"}>My_files.zip </label>
+                            <button className="button">
+                                <FaDownload/>
+                            </button>
+                        </li>
+                        <li>
+                            <div className="field is-horizontal">
+                                <div className="field-label">
+                                    <label className="file-label">
+                                        <input className="file-input" type="file" name="resume"/>
+                                        <span className="file-cta">
+                                            <span className="file-icon"><FaUpload/></span>
+                                            <span className="file-label">Kies een bestand</span>
+                                        </span>
+                                        <span className="file-name">This_is_the_file.zip</span>
+                                    </label>
+                                </div>
+                                <div className="field-body">
+                                    <button className="button"><FaDownload/></button>
+                                </div>
+
+                            </div>
+                        </li>
+                    </div>
+                </div>
+            </div>
+            <div className="columns is-mobile is-centered column is-half">
+                <button className="button is-medium is-center" style={{backgroundColor: "#9c9afd"}}>Bevestigen</button>
+            </div>
+        </>
+    );
+}
\ No newline at end of file