diff --git a/Frontend/package.json b/Frontend/package.json
index 73a1e9eed2060ae1a74a2929a9c970aaf4005043..63a040b6af4dfce804c41320edba17d8fe748b38 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -9,8 +9,8 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "flowbite": "^1.4.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
diff --git a/Frontend/public/index.html b/Frontend/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..afb65197059bf1d95b8992461fc4d34306c5b6a8 100644
--- a/Frontend/public/index.html
+++ b/Frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Fair Register</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/Frontend/src/components/registerwork/HelpIcon.jsx b/Frontend/src/components/registerwork/HelpIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9645612a987db3a74ce2dbfbcf3ae79c996438c0
--- /dev/null
+++ b/Frontend/src/components/registerwork/HelpIcon.jsx
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+const HelpIcon = (props) => {
+  const [helpmessage, setHelpmessage] = useState(false);
+  
+  return (
+    <>
+    <div onClick={() => setHelpmessage(true)}>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="gray">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+      </svg>
+      </div>
+    {helpmessage ? 
+    <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+  
+    <div class="fixed z-10 inset-0 overflow-y-auto">
+      <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
+
+        <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full">
+          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+              <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Hilfe</h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">{props.Message}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <button type="button" onClick={() => {
+              setHelpmessage(false)
+              console.log("KLICK")
+            }} class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">OK</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+    : 
+    <div></div>}
+    </>
+
+
+  );
+};
+
+export default HelpIcon;
diff --git a/Frontend/src/components/registerwork/registerworkInformation.jsx b/Frontend/src/components/registerwork/registerworkInformation.jsx
index 1ca599dd20e3e607770e3b9de2a7e48539d920d5..4ebe16d16951b4af116a5539cdc2c1a1cde40504 100644
--- a/Frontend/src/components/registerwork/registerworkInformation.jsx
+++ b/Frontend/src/components/registerwork/registerworkInformation.jsx
@@ -1,10 +1,35 @@
 import React, { useState } from "react";
+import HelpIcon from "./HelpIcon";
 
 const RegisterWorkInformation = () => {
-  const [language, setLanguage] = useState("");
+  //work information
+  //Beschreibung
+  const [type, setType] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [tags, setTags] = useState(""); //TODO häufiig verwendete Tags abfragen
+  const [language, setLanguage] = useState(""); ////TODO all Sprachen abfragen?
+  const [creation_date, SetCreation_date] = useState("");
+  //Beteiligte Personen
+  const [creator, setCreator] = useState(""); //TODO brauch ich dieses Feld bekomme ich das von den UserService? vielleicht auch registrar?
+  const [creatorURL, setCreatorURL] = useState(""); 
+  const [publisher, setPublisher] = useState(""); 
+  const [attribution, setAttribution] = useState(""); 
+  //Zusätzliche Felder
+  const [workURL, setWorksURL] = useState(""); 
+  const [identifier, setIdentifier] = useState(""); 
+  const [source, setSource] = useState(""); 
+  const [relation, setRelation] = useState(""); 
+  //Weitere Lizenz-Informationen
+  const [licenceTerms, setLicenceTerms] = useState(""); //TODO brachts das noch?? wenn, ja passt das doch besser zu Licence UseCase
+
+  function save(){
+
+  }
 
   return (
     <div className=" max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 sm:my-6 lg:my-10">
+      {description}
       <div className="mt-10 sm:mt-0">
         <div className="md:grid md:grid-cols-3 md:gap-6">
           <div className="md:col-span-1">
@@ -34,35 +59,40 @@ const RegisterWorkInformation = () => {
                               htmlFor="worktype"
                               className="block text-sm font-medium text-gray-700"
                             >
-                              Werksart
+                              Werksart<span className="text-red-600">*</span>
                             </label>
                             <select
                               id="worktype"
                               name="worktype"
+                              onChange={(event)=> setType(event.target.value)}
                               autoComplete="worktype"
                               className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
                             >
-                              <option>Dokument</option>
-                              <option>Audio</option>
-                              <option>Bild</option>
-                              <option>Video</option>
-                              <option>Software</option>
-                              <option>Interaktiv</option>
+                              <option value="document">Dokument</option>
+                              <option value="audio">Audio</option>
+                              <option value="img">Bild</option>
+                              <option value="video">Video</option>
+                              <option value="software">Software</option>
+                              <option value="interactive">Interaktiv</option>
                             </select>
                           </div>
 
                           {/* Title */}
                           <div>
-                            <label
-                              htmlFor="title"
-                              className="block text-sm font-medium text-gray-700"
-                            >
-                              Titel
-                            </label>
+                            <div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto" >
+                              <label
+                                htmlFor="title"
+                                className="block text-sm font-medium text-gray-700"
+                              >
+                                Titel<span className="text-red-600">*</span>
+                              </label>
+                              <HelpIcon Message="Der Titel ist dafür da das das Werk verfügbar ist"></HelpIcon>
+                            </div>
                             <input
+                              id="title"
                               type="text"
                               name="title"
-                              id="title"
+                              onChange={(event)=> setTitle(event.target.value)}
                               className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                             />
                           </div>
@@ -80,6 +110,7 @@ const RegisterWorkInformation = () => {
                                 id="description"
                                 name="description"
                                 rows={3}
+                                onChange={(event)=> setDescription(event.target.value)}
                                 className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                 placeholder="Beschreibung einfügen"
                                 defaultValue={""}
@@ -99,9 +130,10 @@ const RegisterWorkInformation = () => {
                               Tags
                             </label>
                             <input
+                              id="tags"
                               type="text"
                               name="tags"
-                              id="tags"
+                              onChange={(event)=> setTags(event.target.value)}
                               className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                             />
                           </div>
@@ -138,9 +170,10 @@ const RegisterWorkInformation = () => {
                               Erstellungsdatum
                             </label>
                             <input
+                              id="creationdate"
                               type="date"
                               name="creationdate"
-                              id="creationdate"
+                              onChange={(event)=> SetCreation_date(event.target.value)}
                               className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                             />
                           </div>
@@ -161,9 +194,10 @@ const RegisterWorkInformation = () => {
                                 Ersteller
                               </label>
                               <input
+                                id="creator"
                                 type="text"
                                 name="creator"
-                                id="creator"
+                                onChange={(event)=> setCreator(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                             </div>
@@ -177,9 +211,10 @@ const RegisterWorkInformation = () => {
                                 Ersteller URL
                               </label>
                               <input
+                                id="creatorurl"
                                 type="text"
                                 name="creatorurl"
-                                id="creatorurl"
+                                onChange={(event)=> setCreatorURL(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                             </div>
@@ -193,26 +228,28 @@ const RegisterWorkInformation = () => {
                                 Herausgeber
                               </label>
                               <input
+                                id="publisher"
                                 type="text"
                                 name="publisher"
-                                id="publisher"
+                                onChange={(event)=> setPublisher(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                             </div>
 
-                            {/* Contributors */}
+                            {/* Attribution" ( */}
                             <div>
                               <label
-                                htmlFor="contributors"
+                                htmlFor="attribution"
                                 className="block text-sm font-medium text-gray-700"
                               >
                                 Mitwirkende
                               </label>
                               <div className="mt-1">
                                 <textarea
-                                  id="contributors"
-                                  name="contributors"
+                                  id="attribution"
+                                  name="attribution"
                                   rows={3}
+                                  onChange={(event)=> setAttribution(event.target.value)}
                                   className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                   placeholder="Mitwirkende einfügen"
                                   defaultValue={""}
@@ -240,6 +277,7 @@ const RegisterWorkInformation = () => {
                                 type="text"
                                 name="workurl"
                                 id="workurl"
+                                onChange={(event)=> setWorksURL(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                               <p className="mt-2 text-sm text-gray-500">
@@ -256,9 +294,10 @@ const RegisterWorkInformation = () => {
                                 Identifikator
                               </label>
                               <input
+                                id="identifier"
                                 type="text"
                                 name="identifier"
-                                id="identifier"
+                                onChange={(event)=> setIdentifier(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                             </div>
@@ -275,6 +314,7 @@ const RegisterWorkInformation = () => {
                                 <textarea
                                   id="source"
                                   name="source"
+                                  onChange={(event)=> setSource(event.target.value)}
                                   rows={3}
                                   className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                   placeholder="Quelle einfügen"
@@ -292,25 +332,10 @@ const RegisterWorkInformation = () => {
                                 Beziehung
                               </label>
                               <input
+                                d="relation"
                                 type="text"
                                 name="relation"
-                                id="relation"
-                                className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
-                              />
-                            </div>
-
-                            {/* Coverage */}
-                            <div>
-                              <label
-                                htmlFor="coverage"
-                                className="block text-sm font-medium text-gray-700"
-                              >
-                                Abdeckung
-                              </label>
-                              <input
-                                type="text"
-                                name="coverage"
-                                id="coverage"
+                                onChange={(event)=> setRelation(event.target.value)}
                                 className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               />
                             </div>
@@ -334,6 +359,7 @@ const RegisterWorkInformation = () => {
                                 <textarea
                                   id="licenseterms"
                                   name="licenseterms"
+                                  onChange={(event)=> setLicenceTerms(event.target.value)}
                                   rows={3}
                                   className="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                   placeholder="Lizenzbedingungen"
diff --git a/Frontend/src/components/registerwork/registerworkLicence.jsx b/Frontend/src/components/registerwork/registerworkLicence.jsx
index f238c1abc9693a704c467f7bed4ccce67a1faf91..f90aca220b086996783bb9ae8326b3f9eb69e681 100644
--- a/Frontend/src/components/registerwork/registerworkLicence.jsx
+++ b/Frontend/src/components/registerwork/registerworkLicence.jsx
@@ -1,8 +1,18 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
+//TODO: https://api.dalicc.net/docs#/
+
+
 
 const RegisterWorkLicence = () => {
   const [licence, setLicence] = useState("No licence selected"); //'TODO inside brackets
   const [licenceLink, setLicenceLink] = useState("No licence selected"); //value
+/*
+  useEffect(() => { 
+    //load licence 
+    console.print("test")
+  },[]);
+*/
 
   const SelectLicence = (event) => {
     setLicence(event.target.textarea);
diff --git a/Frontend/src/components/registerwork/registerworkSave.jsx b/Frontend/src/components/registerwork/registerworkSave.jsx
index 10c9b23c2a2ad3fae916b7751bacc83e60240c59..d84188cd29ba29482a41f7d41fa2dea15c59fb29 100644
--- a/Frontend/src/components/registerwork/registerworkSave.jsx
+++ b/Frontend/src/components/registerwork/registerworkSave.jsx
@@ -11,7 +11,7 @@ const RegisterWorkSave = () => {
                 Speicheroptionen
               </h3>
               <p className="mt-1 text-sm text-gray-600">
-                Hier kannst du bestimmen, wie dein Werk abgespeichert wird
+                Hier kannst du bestimmen, wie dein Metadaten abgespeichert wird
               </p>
             </div>
           </div>
@@ -51,6 +51,7 @@ const RegisterWorkSave = () => {
                           className="focus:ring-green-500 h-4 w-4 text-green-600 border-gray-300"
                         />
                         {
+                          //Metadaten und IPFS 
                           //TODO: (Source: letztes Meeting Sicherheiterhöhen?? Dachte IPFS ist für jeden Downloadbar und deshalb unsecure )
                         }
                         <label