diff --git a/webstillas/src/App.js b/webstillas/src/App.js
index dc377bd01afb0e25a4aa09360ace0f493dc905a8..2086fe1746a1a218d08f6ec3cd14ca191d5be00c 100644
--- a/webstillas/src/App.js
+++ b/webstillas/src/App.js
@@ -16,6 +16,7 @@ import {UserAuthContextProvider, useUserAuth} from "./context/UserAuthContext";
 import auth from "./firebase";
 import AddProjectFunc from "./components/logistics/project/addProject";
 import AddScaffolding from "./components/logistics/scaffold/addScaffolding";
+import {UserInfo} from "./components/userinformation/userInfo";
 
 
 
@@ -39,6 +40,7 @@ function App() {
                     <Route path="/signup" element={<Signup/>}/>
                     <Route path="/addproject/" element={<ProtectedRoute> <AddProjectFunc/></ProtectedRoute>}/>
                     <Route path="/addscaffolding/" element={<ProtectedRoute> <AddScaffolding/></ProtectedRoute>}/>
+                    <Route path="/userinfo/" element={<ProtectedRoute> <UserInfo/></ProtectedRoute>}/>
 
 
                 </Routes>
diff --git a/webstillas/src/components/Signup.js b/webstillas/src/components/Signup.js
index b3b3373c0e057113656e1a681f1c9b4d6918b7a0..aa6bdcdda99638330bb16cd00e2bbc3b1b7718b3 100644
--- a/webstillas/src/components/Signup.js
+++ b/webstillas/src/components/Signup.js
@@ -4,6 +4,8 @@ import { Form, Alert } from "react-bootstrap";
 import { Button } from "react-bootstrap";
 import { useUserAuth } from "../context/UserAuthContext";
 import postModel from "../modelData/postModel";
+import {formatDate, formatDateToString} from "./projects/projects";
+
 const Signup = () => {
   const [email, setEmail] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -11,6 +13,7 @@ const Signup = () => {
   const [role, setRole] = useState("");
   const [phone, setPhone] = useState(0);
   const [admin, setAdmin] = useState(false);
+  const [birthDay, setBirthDay] = useState("");
 
   const [error, setError] = useState("");
   const [password, setPassword] = useState("");
@@ -22,27 +25,26 @@ const Signup = () => {
     e.preventDefault();
     setError("");
     try {
-      const newUser = await signUp(email, password);
-
-      //Todo Add user in API
-      console.log(newUser.user.uid)
-      const user =
-      {
-        "employeeID": newUser.user.uid,
-          "name": {
-        "firstName": firstName,
-            "lastName": lastName
-      },
-        "role": role,
-          "phone": phone,
-          "email": email,
-          "admin": admin
-      }
-
-      await postModel("http://localhost:8080/stillastracking/v1/api/user", user)
-          .then(() => navigate("/"))
-          .catch(e => console.log(e))
-
+      signUp(email, password).then(newUser => {
+        console.log(newUser.user.uid)
+        const user =
+            {
+              "employeeID": newUser.user.uid,
+              "name": {
+                "firstName": firstName,
+                "lastName": lastName
+              },
+              "role": role,
+              "phone": phone,
+              "email": email,
+              "admin": admin,
+              "dateOfBirth": birthDay
+            }
+        console.log(JSON.stringify(user))
+        postModel("user", user)
+            .then(() => navigate("/"))
+            .catch(e => console.log(e))
+      })
     } catch (err) {
       setError(err.message);
     }
@@ -50,6 +52,10 @@ const Signup = () => {
 
 
 
+
+
+  console.log(birthDay)
+
   return (
     <>
       <div className="p-4 box">
@@ -95,6 +101,9 @@ const Signup = () => {
             </Form.Select>
           </Form.Group>
 
+          <label htmlFor="startDate">Birthday</label>
+          <input type="date" onChange={(event) => setBirthDay(formatDateToString(event.target.value))}/>
+
           <Form.Group className="mb-3" controlId="formBasicEmail">
             <Form.Control
               type="email"
diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.css b/webstillas/src/components/logistics/scaffold/addScaffolding.css
index 439cceb5590c5942986d68b44e323712925ccb3c..0bea57a075d09bdb40abd2230762c3645a168d1a 100644
--- a/webstillas/src/components/logistics/scaffold/addScaffolding.css
+++ b/webstillas/src/components/logistics/scaffold/addScaffolding.css
@@ -1,8 +1,12 @@
 .scaffolding-input{
+    display: flex;
+    justify-content: center;
     width: 400px;
 }
 
 .btn-add-scaffolding{
+    display: flex;
+    justify-content: center;
     padding-top: 20px;
 }
 
@@ -11,8 +15,16 @@
     margin-left: 35%;
     margin-top: 10%;
     width: 500px;
-    background-color: #9f9e9e;
     align-content: center;
 
 }
 
+.input-fields-add{
+    padding-bottom: 20px;
+    justify-content: center;
+}
+
+.main-add-scaffolding{
+    margin-left: 35%;
+    margin-top: 7%;
+}
diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.js b/webstillas/src/components/logistics/scaffold/addScaffolding.js
index 1432805ec1891dc40bc1a2faaed6e383f533e76f..c062a8c959ac6a737c7de4cabd727b323c660cee 100644
--- a/webstillas/src/components/logistics/scaffold/addScaffolding.js
+++ b/webstillas/src/components/logistics/scaffold/addScaffolding.js
@@ -25,7 +25,7 @@ class AddScaffolding extends React.Component{
     scaffoldingInformation(){
         return(
             <div className={"input-information"}>
-                <div>
+                <div className={"input-fields-add"}>
                     <p className = {"input-sorting-text"}>Enter ID</p>
 
                     <input type={"text"}  className={"form-control scaffolding-input"} onChange={event =>
@@ -33,10 +33,10 @@ class AddScaffolding extends React.Component{
                         scaffolding.id = Number(event.target.value);
                         this.setState({scaffolding})}}/>
                 </div>
-                <div>
+                <div className={"input-fields-add"}>
                     <p className = {"input-sorting-text"}>Overfør til prosjekt:</p>
                         <select
-                            className={"form-select"}
+                            className={"form-select scaffolding-input"}
                             value={"Test"}
                                 onChange={(e) =>
                         {const scaffolding = {...this.state.scaffolding};
@@ -74,15 +74,17 @@ class AddScaffolding extends React.Component{
 
     render() {
         return(
-            <div className={"input-fields"}>
-                {this.scaffoldingInformation()}
-                <div className={"btn-add-scaffolding"}>
-                    <button className={"btn"} onClick={() => this.postRequest()}>Legg til</button>
-
+            <div className={"main-add-scaffolding"}>
+                <div className={"info-card"}>
+                    {this.scaffoldingInformation()}
+                    <div className={"btn-add-scaffolding"}>
+                        <button className={"btn"} onClick={() => this.postRequest()}>Legg til</button>
+                    </div>
                 </div>
             </div>
 
 
+
     )
     }
 }
diff --git a/webstillas/src/components/projects/elements/card.css b/webstillas/src/components/projects/elements/card.css
index 975e533a3fba39bfa5d79f53ba41b92d76d04979..a6542bf37768d90a295a247cfe689d2a9ad78bc1 100644
--- a/webstillas/src/components/projects/elements/card.css
+++ b/webstillas/src/components/projects/elements/card.css
@@ -6,9 +6,6 @@
 
 }
 
-.body {
-    background: black;
-}
 
 .name-btn{
     display: flex;
@@ -20,22 +17,13 @@
 .btn-delete{
     height: fit-content;
     width: fit-content;
-    align-content: center;
-    right: 10px;
-
-}
-
-
-.btn-delete{
     background-size: cover;
 }
 
-
 .header {
     display: flex;
     justify-content: space-between;
     padding: 24px;
-
 }
 
 .image-project {
@@ -78,9 +66,6 @@
     border-left-color: gray;
 }
 
-
-
-
 .card-btn{
     padding: 0 24px 24px;
 }
@@ -131,3 +116,7 @@
     padding-right: 35px;
     padding-bottom: 30px;
 }
+
+.preview-info{
+    width: 500px;
+}
diff --git a/webstillas/src/components/projects/elements/card.js b/webstillas/src/components/projects/elements/card.js
index 251f2b809f58e46211c04f8bc275ab80492844e3..36dfa1e68d157f82062742afea91456cdfc21c48 100644
--- a/webstillas/src/components/projects/elements/card.js
+++ b/webstillas/src/components/projects/elements/card.js
@@ -30,14 +30,18 @@ function CardElement(props) {
                     <section className={"header"}>
                         <h3>{props.name}</h3>
                     </section>
-                    <IconButton className={"btn-delete"} onClick={DeleteProject}>
-                        <DeleteIcon style={{ fontSize: 50, float: "right" }} />
-                    </IconButton>
+                    <div className={"btn-delete"}>
+                        <IconButton  onClick={DeleteProject}>
+                            <DeleteIcon style={{ fontSize: 50}} />
+                        </IconButton>
+                    </div>
+
                 </div>
 
                 <section className={"image-project"}>
                     <img src={img} alt={""}/>
                 </section>
+
                 <section className={"information-highlights-cta"}>
                     <div className={"information-highlights"}>
                         <ul className={"information-list"}>
diff --git a/webstillas/src/components/projects/elements/preView.js b/webstillas/src/components/projects/elements/preView.js
index ee45a3df2bf624de33137ca33da8304d94f65198..2dc2af39d7c0704c8874d1a9220df2b69f807c90 100644
--- a/webstillas/src/components/projects/elements/preView.js
+++ b/webstillas/src/components/projects/elements/preView.js
@@ -22,7 +22,6 @@ const Map = ReactMapboxGl({
 });
 
 
-
 //mapboxgl.accessToken = 'pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ';
 /*
 //Todo refactor class to function
@@ -88,12 +87,12 @@ class PreViewClass extends React.Component {
 }*/
 
 
-function PreViewFunction(props){
+function PreViewFunction(props) {
     const data = props.data
 
 
-    return(
-        <div className = {"preView-Project-Main"}>
+    return (
+        <div className={"preView-Project-Main"}>
             <Map
                 style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
                 containerStyle={{
@@ -119,9 +118,6 @@ function PreViewFunction(props){
 }
 
 
-
-
-
 function getProjectID() {
     const pathSplit = window.location.href.split("/")
     return pathSplit[pathSplit.length - 1]
@@ -148,34 +144,60 @@ function scaffoldingComponents(data) {
 
 function contactInformation(project) {
     return (
-        <section className={"contact-highlights-cta preview-text"}>
-            <div className={"information-highlights"}>
-                <ul className={"contact-list"}>
-                    <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>Navn/Bedrift</span>
-                        <span className={"right-contact-text"}>{project[0].customer.name}</span>
-                    </li>
-                    <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>Telefon nummer</span>
-                        <span className={"right-contact-text"}>{project[0].customer.number}</span>
-                    </li>
-                    <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>Adresse</span>
-                        <span
-                            className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span>
-                    </li>
-                    <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>E-mail</span>
-                        <span className={"right-contact-text"}>{project[0].customer.email}</span>
-                    </li>
-                    <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>Periode</span>
-                        <span
-                            className={"right-contact-text"}>{project[0].period.startDate} to {project[0].period.endDate}  </span>
-                    </li>
-                </ul>
-            </div>
-        </section>
+        <div>
+            <section className={"info-card"}>
+                <div className={"information-highlights preview-info"}>
+                    <h3>Prosjekt Informasjon</h3>
+                    <ul className={"contact-list"}>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Kunde</span>
+                            <span className={"right-contact-text"}>{project[0].customer.name}</span>
+                        </li>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Størrelse</span>
+                            <span className={"right-contact-text"}>{project[0].size} &#13217;</span>
+                        </li>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Status</span>
+                            <span className={"right-contact-text"}>{project[0].state}</span>
+                        </li>
+
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Periode</span>
+                            <span
+                                className={"right-contact-text"}>{project[0].period.startDate} - {project[0].period.endDate}  </span>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+            <section className={"info-card"}>
+                <div className={"information-highlights preview-info"}>
+                    <h3>Kontakt Informasjon</h3>
+                    <ul className={"contact-list"}>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Kontakt person</span>
+                            <span className={"right-contact-text"}>{project[0].customer.name}</span>
+                        </li>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Telefon nummer</span>
+                            <span className={"right-contact-text"}>{project[0].customer.number}</span>
+                        </li>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>E-mail</span>
+                            <span className={"right-contact-text"}>{project[0].customer.email}</span>
+                        </li>
+                        <li className={"horizontal-list-contact"}>
+                            <span className={"left-contact-text"}>Adresse</span>
+                            <span
+                                className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+
+
+        </div>
+
     )
 }
 
@@ -203,7 +225,7 @@ export const PreView = () => {
     } else {
         return (
             <div className={"preView-Project-Main"}>
-                <div className = {"map-preview"}>
+                <div className={"map-preview"}>
                     <PreViewFunction data={project[0]}/>
                 </div>
                 <div className={"tabs"}>
diff --git a/webstillas/src/components/scaffolding/scaffolding.css b/webstillas/src/components/scaffolding/scaffolding.css
index 3d4c2d3d20be65743514139bc3eb2836d44f3e84..4519052cb16603d34b40b7a6c390de9a69a4142c 100644
--- a/webstillas/src/components/scaffolding/scaffolding.css
+++ b/webstillas/src/components/scaffolding/scaffolding.css
@@ -8,6 +8,8 @@
 
 .input-sorting-text{
     margin-bottom: 0;
+    display: flex;
+    justify-content: center;
     font-weight: initial;
     font-size: 15px;
 }
diff --git a/webstillas/src/components/topBar/topBar.js b/webstillas/src/components/topBar/topBar.js
index 01ccbdb1d31ec25e272ddcb40146bd23e7c3d663..eb61859ea0942748d95b729e73e9d33ac205460a 100644
--- a/webstillas/src/components/topBar/topBar.js
+++ b/webstillas/src/components/topBar/topBar.js
@@ -8,6 +8,7 @@ import {DropdownButton, NavDropdown} from "react-bootstrap";
 import DropdownItem from "react-bootstrap/DropdownItem";
 import {useUserAuth} from "../../context/UserAuthContext";
 import {auth} from "../../firebase"
+import {orange} from "@material-ui/core/colors";
 
 /**
  Class that will create a topbar for the application.
@@ -45,11 +46,10 @@ const TopBar = () => {
                         <Button className="button">Logistikk</Button>
                     </Link>*/}
 
-                        <NavDropdown id="basic-nav-dropdown"
+                        <NavDropdown id="basic-nav-dropdown1"
                                         title={"Logistikk"}
                                         size="sm"
-                                     style={{textDecorationColor: "black"}}
-
+                                     menuVariant={"dark"}
 
                         >
                             <DropdownItem>
@@ -58,16 +58,16 @@ const TopBar = () => {
                             <DropdownItem>
                                 <Link to={"/addscaffolding/"}>Legg til stillas</Link>
                             </DropdownItem>
+                        </NavDropdown>
 
 
-                        </NavDropdown>
                         <DropdownButton id="dropdown-button"
                                         title={"Bruker"}
                                         size="sm"
 
                         >
                             <DropdownItem>
-                                <Link to={"/addscaffolding/"}>Bruker Informasjon</Link>
+                                <Link to={"/userinfo/"}>Bruker Informasjon</Link>
                             </DropdownItem>
 
                             <DropdownItem onClick={logOut}>Logg ut</DropdownItem>
diff --git a/webstillas/src/components/userinformation/userInfo.css b/webstillas/src/components/userinformation/userInfo.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..db9d96897ecc2b5206a7ed9abe22be7a825f940a 100644
--- a/webstillas/src/components/userinformation/userInfo.css
+++ b/webstillas/src/components/userinformation/userInfo.css
@@ -0,0 +1,43 @@
+.under-information{
+    display: flex;
+    justify-content: center;
+    color: #9f9e9e;
+
+}
+
+.image-frame{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 10px;
+}
+
+body {
+    font-family: sans-serif;
+}
+.profile-image{
+    width: 100px;
+
+}
+
+.header-information{
+    display: flex;
+    justify-content: center;
+}
+
+.main-userinfo{
+    margin-top: 5%;
+    margin-left: 35%;
+}
+
+.info-card{
+    alignment: center;
+    width: fit-content;
+    padding: 20px 20px 20px 20px;
+    Box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.information-text{
+    justify-content: center;
+    padding-bottom: 10px;
+}
+
diff --git a/webstillas/src/components/userinformation/userInfo.js b/webstillas/src/components/userinformation/userInfo.js
index eb7430f50a18805b108a55d8dee00d99c1cf6d38..915f56c2344b0d8ed9d6e8581ae885b8b31ffcbe 100644
--- a/webstillas/src/components/userinformation/userInfo.js
+++ b/webstillas/src/components/userinformation/userInfo.js
@@ -1,25 +1,85 @@
 import React from "react";
 import { auth } from "../../firebase";
-import {formatDate} from "../projects/projects";
+import {GetDummyData} from "../../modelData/addData";
+import { USER_URL} from "../../modelData/constantsFile";
+import {SpinnerDefault} from "../Spinner";
+import "./userInfo.css"
+import profileImg from "./profile-png-icon-2.png"
 
+export function UserInfo(){
+    const {isLoading, data} = GetDummyData("user", USER_URL + auth.currentUser.uid)
 
+    if (isLoading) {
+        return (<SpinnerDefault/>)
+    } else {
+        return (
+            <div className={"main-userinfo"}>
+                <div className={"info-card"}>
+                    <div className={"image-frame"}>
+                        <img src={profileImg} alt={""} className={"profile-image"}/>
 
-function UserInfo(){
-
-
-
-    return(
-        <div className={"info-card"}>
-            <div className={"information-text"}>
-                <h3 className={"header-information"}>
-
-                </h3>
-                <h3 className={"under-information"}>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.name.firstName} {data.name.lastName}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Navn
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.phone}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Telefonnummer
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.email}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Email
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.employeeID}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Ansatt ID
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.dateOfBirth}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Fødselsdato
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.role}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Stilling
+                        </h4>
+                    </div>
+                    <div className={"information-text"}>
+                        <h4 className={"header-information"}>
+                            {data.admin.toString()}
+                        </h4>
+                        <h4 className={"under-information"}>
+                            Administrerende rettigheter
+                        </h4>
+                    </div>
+                </div>
+            </div>
 
-                </h3>
+        )
+    }
+}
 
 
-            </div>
-        </div>
-    )
-}
diff --git a/webstillas/src/modelData/constantsFile.js b/webstillas/src/modelData/constantsFile.js
index ba7387fb3c3ddde3fb3a6d68401748af7b1b8b85..944117bb987e530e25fa1cb938f14dbed1b95c85 100644
--- a/webstillas/src/modelData/constantsFile.js
+++ b/webstillas/src/modelData/constantsFile.js
@@ -2,7 +2,7 @@ export const PROJECTS_WITH_SCAFFOLDING_URL = "project?scaffolding=true"
 export const BASE_URL = "http://10.212.138.205:8080/stillastracking/v1/api/"
 export const SCAFFOLDING_URL = "unit"
 export const STORAGE_URL = "storage"
-export const USER_URL = "user"
+export const USER_URL = "user?id="
 export const PROJECTS_URL = "project"
 export const PROJECTS_URL_WITH_SCAFFOLDING = "project?scaffolding=true"
 
diff --git a/webstillas/src/modelData/postModel.js b/webstillas/src/modelData/postModel.js
index 0f1a395acd27e89678444e89cdd93f4d05d7eb19..48fb7b976507b8d68dd62641af4657131b94d92b 100644
--- a/webstillas/src/modelData/postModel.js
+++ b/webstillas/src/modelData/postModel.js
@@ -24,6 +24,6 @@ export default function postModel(url, body) {
             }
         });
 
-        xhr.send(body);
+        xhr.send(JSON.stringify(body));
     });
 }