diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index 10feec5..ed4d438 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -1,3 +1,4 @@
+
 import "./App.css";
 import "./styles/colors.css";
 import "./styles/fonts.css";
@@ -9,6 +10,7 @@ import Profile from "./pages/Profile";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Auth } from "./api/Auth";
 import { NotFound } from "./pages/404Page/NotFoundPage";
+import PostCreation from './PostCreation';
 
 function App() {
   return (
diff --git a/code/frontend/src/PostCreation.tsx b/code/frontend/src/PostCreation.tsx
new file mode 100644
index 0000000..39bc65f
--- /dev/null
+++ b/code/frontend/src/PostCreation.tsx
@@ -0,0 +1,14 @@
+import Header from "./header";
+import "./postCreation.css";
+
+function PostCreation(){
+
+    return(
+    <div className="create-display">
+        <Header/>
+        <div className="create-part">
+            <h1>Create Post</h1>
+        </div>
+    </div>);
+}
+export default PostCreation;
\ No newline at end of file
diff --git a/code/frontend/src/postCreation.css b/code/frontend/src/postCreation.css
new file mode 100644
index 0000000..0b3e280
--- /dev/null
+++ b/code/frontend/src/postCreation.css
@@ -0,0 +1,20 @@
+.create-display{
+    display: flex;
+    flex-direction: column;
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+    position: absolute; 
+    background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
+    align-items: center;
+    justify-content: center;
+}
+.create-part{
+    display: flex;
+    padding: 29px 40px;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    border-right: 4px solid var(--Rotkehlchen-gray-hover, #D5D7DA);
+    border-left: 4px solid var(--Rotkehlchen-gray-hover, #D5D7DA);
+    background: #FFF;
+}
\ No newline at end of file
diff --git a/code/frontend/yarn.lock b/code/frontend/yarn.lock
index 3fa9179..a1beb5e 100644
--- a/code/frontend/yarn.lock
+++ b/code/frontend/yarn.lock
@@ -1808,6 +1808,29 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.1.tgz#43532ccf57be19055eb20e7802508520293cf286"
   integrity sha512-yBckQs4aQ8mqukLnPC6ivIRv6guhaXi8snVl00VtyojBbm+l6VbVhyTSZ68Abcx7Ah8B+GZhrB7BOli+e+9LkQ==
 
+"@mui/base@5.0.0-beta.40-1":
+  version "5.0.0-beta.40-1"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40-1.tgz#6da6229e5e675e811f319149f6e29d7a77522851"
+  integrity sha512-agKXuNNy0bHUmeU7pNmoZwNFr7Hiyhojkb9+2PVyDG5+6RafYuyMgbrav8CndsB7KUc/U51JAw9vKNDLYBzaUA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "~7.2.15"
+    "@mui/utils" "^5.17.1"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.17.1":
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.17.1.tgz#49b88ecb68b800431b5c2f2bfb71372d1f1478fa"
+  integrity sha512-OcZj+cs6EfUD39IoPBOgN61zf1XFVY+imsGoBDwXeSq2UHJZE3N59zzBOVjclck91Ne3e9gudONOeILvHCIhUA==
+
+"@mui/core-downloads-tracker@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.2.tgz"
+  integrity sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==
+
 "@mui/icons-material@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-7.1.1.tgz#0e0e9640579da5e4096f0449438337c448bc5a5c"