diff --git a/src/app/globals.css b/src/app/globals.css
index 13d40b8..bf5bbdd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,3 +25,67 @@ body {
     text-wrap: balance;
   }
 }
+
+.container {
+  display: flex;
+  justify-content: space-between; /* Optional: sorgt für Abstand */
+  width: 100%; /* Optional: gibt dem Container eine Breite */
+}
+
+.textbox {
+  width: 100%; /* Nimmt die volle Breite des Containers ein */
+  margin-top: 10px; /* Optional: Abstand oberhalb der Textbox */
+  padding: 10px; /* Optional: Innenabstand für die Textbox */
+  border-radius: 20px; /* Abgerundete Ecken */
+  border: 2px solid #580000; /* Optional: Border-Farbe */
+  background-color: #ffffff; /* Hintergrundfarbe */
+  color: #0a0a0a; /* Textfarbe */
+  font-size: 16px; /* Schriftgröße */
+}
+
+.header {
+  font-size: 36px;
+  text-align: center;
+}
+
+.header_box {
+  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
+  margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
+  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  /* font-size: 16px; // Optional: definiert die Schriftgröße */
+  border-radius: 20px;
+  border: 20px solid #202020;
+  background-color: #202020;
+}
+
+.header_copyright {
+  font-size: 16px;
+  color:#707070;
+  padding-top: 10px;
+}
+
+.button {
+  border: 2px solid #101010;
+  background-color: #101010;
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px
+}
+
+.body_box {
+  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
+  margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
+  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  /* font-size: 16px; // Optional: definiert die Schriftgröße */
+  border-radius: 20px;
+  /* border: 2px solid #580000; */
+  background-color: #474747;
+}
+
+.body_title {
+  font-size: 20px;
+}
+
+.text {
+  margin: 15px;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 11fcf69..418efb5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,85 +2,125 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+    <>
+      <header className="header">
+        <div className="title">
+          <main className="header_box">
+            Operations Research Tool
+            <br></br>
+            <span className="header_copyright">
+              <i>by Spaceholder Programming</i>
+            </span>
+          </main>
+        </div>
+      </header>
+      <div className="grid grid-cols-2 grid-rows-1 p-6">
+        <div className="body_box">
+          <div className="body_title">
+            Your optimization problem:
+          </div>
+          <button className="button">
+            Maximize
+          </button>
+          <button className="button">
+            Minimize
+          </button>
+          <br></br>
+          <textarea
+            className="textbox"
+            placeholder="Function"
+          />
+          <div className="container">
+            <br></br>
+            <div className="text">s.t.</div>
+            <textarea
+              className="textbox"
+              placeholder="Restriction"
+            />
+            <button className="button">
+              remove
+            </button>
+          </div>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <div className="container">
+            <br></br>
+            <div className="text">s.t.</div>
+            <textarea
+              className="textbox"
+              placeholder="Restriction"
+            />
+            <button className="button">
+              remove
+            </button>
+          </div>
+          <div className="container">
+            <br></br>
+            <div className="text">s.t.</div>
+            <textarea
+              className="textbox"
+              placeholder="Restriction"
+            />
+            <button className="button">
+              remove
+            </button>
+          </div>
+
+          <button className="button">
+            add
+          </button>
+        </div>
+        <div className="grid grid-cols-1 grod-rows-3">
+          <div className="body_box">
+            <div className="body_title">
+              Result
+            </div>
+          </div>
+          <div className="body_box">
+            <div className="body_title">
+              Variables
+            </div>
+          </div>
+          <div className="body_box">
+            <div className="body_title">
+              Logs
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+        <footer className=" flex gap-6 flex-wrap items-center justify-center">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
+              aria-hidden
+              src="https://nextjs.org/icons/file.svg"
+              alt="File icon"
+              width={16}
+              height={16}
             />
-            Deploy now
+            Go to our docs
           </a>
           <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Read our docs
+            <Image
+              aria-hidden
+              src="https://nextjs.org/icons/globe.svg"
+              alt="Globe icon"
+              width={16}
+              height={16}
+            />
+            See the source code
           </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Go to our docs
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          See the source code
-        </a>
-      </footer>
-    </div>
+        </footer>
+      </div>
+    </>
   );
 }