diff --git a/src/components/BookingTable/index.js b/src/components/BookingTable/index.js
index bf62a75..c7409d4 100644
--- a/src/components/BookingTable/index.js
+++ b/src/components/BookingTable/index.js
@@ -128,6 +128,36 @@ const ErrorMessage = styled.p`
   text-align: center;
 `;
 
+const ModalWrapper = styled.div`
+  .startTime {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    margin-right: 20px;
+  }
+  .endTime {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 20px;
+    margin-bottom: 10px;
+  }
+  .textInput {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 20px;
+    margin-bottom: 10px;
+  }
+  .textArea {
+    width: 278px;
+    height: 93px;
+    resize: none;
+    border-radius: 2px;
+    border: none;
+    text-align: initial;
+  }
+`;
+
 class BookingTable extends Component {
   static propTypes = {
     locale: PropTypes.shape({
@@ -445,67 +475,71 @@ class BookingTable extends Component {
             )}
           </DayMenu>
         </DayMenuDiv>
-        <Modal
-          visable={this.state.showModal}
-          modalHeader="Booking Modal"
-          modalFooterSubmit={this.props.locale.bookTime}
-          modalFooterSubmit2={this.props.locale.closeModal}
-          valid={this.state.valid}
-          onSubmit={() =>
-            this.bookTime(
-              this.state.timeStamp,
-              this.state.userName,
-              this.state.userId,
-              this.state.bookTimeText,
-              this.state.startTime,
-              this.state.endTime
-            )}
-          onSubmit2={() => this.setState({ showModal: false })}
-        >
-          <div>
-            <div>
-              {this.props.locale.start}
-              <img alt="Blue clock icon" src={timeBlue} />
-              {this.state.range.length > 0 && (
-                <DropDown
-                  range={this.state.range}
-                  onChange={date => {
-                    this.setState({ startTime: date }, () => {
-                      this.validateDate();
-                    });
-                  }}
-                />
-              )}
-              {this.state.valid === false && (
-                <img alt="NotValidIcon" src={notValid} />
+        <ModalWrapper>
+          <Modal
+            visable={this.state.showModal}
+            modalHeader="Book appointment"
+            modalFooterSubmit={this.props.locale.bookTime}
+            modalFooterSubmit2={this.props.locale.closeModal}
+            valid={this.state.valid}
+            onSubmit={() =>
+              this.bookTime(
+                this.state.timeStamp,
+                this.state.userName,
+                this.state.userId,
+                this.state.bookTimeText,
+                this.state.startTime,
+                this.state.endTime
               )}
-            </div>
+            onSubmit2={() => this.setState({ showModal: false })}
+          >
             <div>
-              {this.props.locale.end}
-              <img alt="Red clock icon" src={timeRed} />
-              {this.state.range.length > 0 && (
-                <DropDown
-                  range={this.state.range}
-                  onChange={date => {
-                    this.setState({ endTime: date }, () => {
-                      this.validateDate();
-                    });
-                  }}
+              <div className="startTime">
+                {this.props.locale.start}
+                <img alt="Blue clock icon" src={timeBlue} />
+                {this.state.range.length > 0 && (
+                  <DropDown
+                    className="dropDown"
+                    range={this.state.range}
+                    onChange={date => {
+                      this.setState({ startTime: date }, () => {
+                        this.validateDate();
+                      });
+                    }}
+                  />
+                )}
+                {this.state.valid === false && (
+                  <img alt="NotValidIcon" src={notValid} />
+                )}
+              </div>
+              <div className="endTime">
+                {this.props.locale.end}
+                <img alt="Red clock icon" src={timeRed} />
+                {this.state.range.length > 0 && (
+                  <DropDown
+                    range={this.state.range}
+                    onChange={date => {
+                      this.setState({ endTime: date }, () => {
+                        this.validateDate();
+                      });
+                    }}
+                  />
+                )}
+              </div>
+              <div className="textInput">
+                {this.props.locale.note}
+                <img alt="Grey note icon" src={noteGray} />
+                <textarea
+                  className="textArea"
+                  type="text"
+                  placeholder={this.props.locale.optional}
+                  value={this.state.bookTimeText}
+                  onChange={this.handleChange}
                 />
-              )}
-            </div>
-            <div>
-              {this.props.locale.note}
-              <img alt="Grey note icon" src={noteGray} />
-              <input
-                type="text"
-                placeholder={this.props.locale.optional}
-                value={this.state.bookTimeText}
-                onChange={this.handleChange}
-              />
+              </div>
             </div>
-          </div>
-        </Modal>
+          </Modal>
+        </ModalWrapper>
       </div>
     );
   }
diff --git a/src/components/DropDown/index.js b/src/components/DropDown/index.js
index 56880c6..77ed94c 100644
--- a/src/components/DropDown/index.js
+++ b/src/components/DropDown/index.js
@@ -8,10 +8,9 @@ import * as ApiActions from '../../components/Actions/actions';
 
 const DropDownWrapper = styled.div`
   position: relative;
-  display: inline-block;
-  .dropbtn {
-    width: 90px;
-    height: 30px;
+  ${'' /* display: inline-block; */} .dropbtn {
+    width: 280px;
+    height: 36px;
     color: white;
     font-size: 16px;
     border: none;
@@ -19,6 +18,7 @@ const DropDownWrapper = styled.div`
     cursor: pointer;
     outline: none !important;
     color: #5f7183;
+    text-align: initial;
   }
   ${props => {
     if (props.menuHidden) {
@@ -42,7 +42,9 @@ const DropDownWrapper = styled.div`
     }
   }};
   .bookingButton {
-    width: 90px;
+    width: -webkit-fill-available;
+    display: inline-flex;
+    justify-content: flex-start;
     height: 30px;
     color: white;
     font-size: 16px;
diff --git a/src/components/Header/iceflag.png b/src/components/Header/iceflag.png
new file mode 100644
index 0000000..38e61ae
Binary files /dev/null and b/src/components/Header/iceflag.png differ
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 0db2388..a505d82 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -3,36 +3,51 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import usaFlag from './usaflag.png';
+import iceFlag from './iceflag.png';
+import ebsLogo from './logo.png';
 
 import * as LocaleActions from '../../redux/locale/actions';
 
 const HeaderWrapper = styled.header`
-  display: flex;
-  justify-content: center;
   padding: 7px;
   background-color: #0085ff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
-const ImageLogo = styled.div`
-  background-image: url(${props => props.src});
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  width: 200px;
-  height: 50px;
+const FlagWrapper = styled.div`
+  margin-right: 64px;
+
+  button {
+    border: none;
+    background-color: Transparent;
+    outline: none;
+  }
 `;
+const LogoHeader = styled.div`
+  img {
+    width: 200px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+
 const UserInfo = styled.div`
-  position: relative;
-  height: 100%;
+  margin-right: 160px;
   display: flex;
   img {
     border-radius: 50%;
     margin-right: 10px;
+    width: 20%;
   }
   p {
     color: white;
     display: inline-block;
     white-space: nowrap;
+    font-family: 'Trebuchet MS';
   }
 `;
 
@@ -50,14 +65,25 @@ class Header extends Component {
   render() {
     return (
       <HeaderWrapper>
+        <LogoHeader>
+          <img alt="logo of the website" src={ebsLogo} />
+        </LogoHeader>
         {this.props.userData != null && (
           <UserInfo>
             <img alt="/" src={this.props.userData.picture} />
             <p>{this.props.userData.name}</p>
           </UserInfo>
         )}
-        <button onClick={() => this.props.setLanguage('is')}>is</button>
-        <button onClick={() => this.props.setLanguage('en')}>en</button>
+        <FlagWrapper>
+          <button onClick={() => this.props.setLanguage('is')}>
+            {' '}
+            <img alt="Icelandic" src={iceFlag} />
+          </button>
+          <button onClick={() => this.props.setLanguage('en')}>
+            {' '}
+            <img alt="English" src={usaFlag} />
+          </button>
+        </FlagWrapper>
       </HeaderWrapper>
     );
   }
diff --git a/src/components/Header/logo.png b/src/components/Header/logo.png
new file mode 100644
index 0000000..0d2fd6d
Binary files /dev/null and b/src/components/Header/logo.png differ
diff --git a/src/components/Header/usaflag.png b/src/components/Header/usaflag.png
new file mode 100644
index 0000000..f33461a
Binary files /dev/null and b/src/components/Header/usaflag.png differ
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 4fc5fda..ba2b55a 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -15,62 +15,31 @@ const PageWrapperLeft = styled.div`
   height: 100%;
   min-height: 100vh;
   float: left;
-  @media (max-width: 50%) {
-    ${'' /* display: none; */};
-  }
   background-image: url(${mountainBackround});
   background-size: cover;
-  ${'' /* background-position: left;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover; */};
-`;
-
-const LogoHeader = styled.div`
-  ${'' /* display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: baseline;
-  text-align: right; */} img {
-    height: 27%;
-    width: 27%;
+  img {
+    width: 200px;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
   }
-  ${'' /* button {
-    top: 0;
-    width: 25%;
-    display: flex;
-    margin: 5px;
-    padding: 5px;
-    width: 100px;
-    background-color: #0085ff;
-    color: white;
-    border: none;
+  @media screen and (max-width: 750px) {
+    display: none;
   }
-  p {
-    font-family: 'Open Sans';
-    width: 25%;
-    color: white;
-  } */};
 `;
-
 const PageWrapperRight = styled.div`
+  background-color: red;
   height: 100%;
   width: 40%;
   float: left;
-  ${'' /* justify-content: center;
-  align-items: center; */};
+  @media screen and (max-width: 750px) {
+    display: flex;
+    justify-content: center;
+    float: none;
+    width: 100%;
+  }
 `;
 
-// const SlingWrapper = styled.div`
-//   font-family: Arial;
-//   color: #0085ff;
-//   justify-content: center;
-//   align-items: center;
-// `;
-
 const LoginWrapper = styled.div`
   margin: auto;
   display: flex;
@@ -85,10 +54,7 @@ const LoginWrapper = styled.div`
     margin: 5px;
     padding: 5px;
   }
-  .forgotPasswordStyle {
-    font-size: 12px;
-    color: grey;
-  }
+
   .buttonStyle {
     background-color: #0085ff;
     width: 250px;
@@ -132,64 +98,27 @@ class Login extends Component {
     return (
       <div>
         <PageWrapperLeft>
-          <LogoHeader>
+          <div className="divLeft">
             <img alt="logo of the website" src={ebsLogo} />
-
-            {/* <p>Don´t have an account?</p>
-
-            <button className="signUpStyle">
-              <a href="./SignUp">Sign up</a>
-            </button> */}
-          </LogoHeader>
+          </div>
         </PageWrapperLeft>
 
         <PageWrapperRight>
-          {/* <SlingWrapper>
-            <h1>Sling EBS</h1>
-          </SlingWrapper> */}
-
-          <LoginWrapper>
-            <h1>Sling EBS</h1>
-            <FacebookLogin
-              appId={process.env.REACT_APP_FACEBOOK}
-              autoLoad={false}
-              fields="name,email,picture"
-              callback={response => this.onFbCallback(response)}
-            />
-
-            {/* <h1>Sling EBS</h1>
-
-            <p>Log in</p>
-
-            <p className="forgotPasswordStyle">
-              Enter your <b>email address</b> and <b>password</b>
-            </p>
-
-            <input
-              className="inputStyle"
-              type="email"
-              name="email"
-              placeholder="Email address"
-            />
-
-            <input
-              className="inputStyle"
-              type="password"
-              name="password"
-              placeholder="Password"
-            />
-
-            <button className="buttonStyle">Next</button>
-
-            <p className="forgotPasswordStyle">
-              Forgot your{' '}
-              <a href="/notimplemented">
-                <u>password?</u>
-              </a>
-            </p> */}
-            <p className="or">OR</p>
-            <button className="buttonStyle">Skip this step</button>
-          </LoginWrapper>
+          <div className="divRight">
+            <LoginWrapper>
+              <h1>Sling EBS</h1>
+              <FacebookLogin
+                size="medium"
+                appId={process.env.REACT_APP_FACEBOOK}
+                autoLoad={false}
+                fields="name,email,picture"
+                callback={response => this.onFbCallback(response)}
+              />
+
+              <p className="or">OR</p>
+              <button className="buttonStyle">Skip this step</button>
+            </LoginWrapper>
+          </div>
         </PageWrapperRight>
       </div>
     );
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index bde970f..fa79eff 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import { css } from 'styled-components';
 import PropTypes from 'prop-types';
+import timeBlue from '../BookingTable/timeblue.svg';
+import closeX from './x.png';
 
 const ModalWrapper = styled.div`
   ${props => {
@@ -13,7 +15,6 @@ const ModalWrapper = styled.div`
       return css`
         position: fixed; /* Stay in place */
         z-index: 1; /* Sit on top */
-        padding-top: 100px; /* Location of the box */
         left: 0;
         top: 0;
         width: 100%; /* Full width */
@@ -27,26 +28,66 @@ const ModalWrapper = styled.div`
 `;
 const ModalContainer = styled.div`
   background-color: #fefefe;
-  margin: auto;
   border: 1px solid #888;
-  width: 50%;
+  width: 461px;
+  height: 343px;
+  min-width: 461px;
+  min-height: 343px;
   border-radius: 8px;
   background-color: #f4f5f9;
   box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.5);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%) translateY(-50%);
+  font-family: Trebuchet MS;
+  font-size: 14px;
+  color: #738190;
   img {
-    height: 15px;
+    height: 30px;
+    padding: 0px 10px;
   }
 `;
 
 const ModalHead = styled.div`
-  margin-top: 0;
-  height: 30px;
+  display: flex;
+  height: 5%;
+  width: 100%;
   background-color: #ffffff;
   border-radius: 8px 8px 0 0;
-  width: 100%;
-  padding: 10px 0;
+  padding: 27px 0;
+  font-family: Trebuchet MS;
+  font-size: 20px;
+  color: #0085ff;
+  button {
+    border: none;
+    background-color: Transparent;
+    margin-left: 39%;
+    cursor: pointer;
+    padding: 0;
+    outline: none;
+  }
+`;
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  button {
+    background-color: #0085ff;
+    border: none;
+    border-radius: 2px;
+    color: white;
+    padding: 10px 54px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 13px;
+    font-family: Trebuchet MS;
+    font-weight: bold;
+    cursor: pointer;
+    margin-right: 20px;
+  }
 `;
-const ModalFooter = styled.div``;
 
 export default class Modal extends Component {
   componentDidUpdate(prevProps, prevState) {
@@ -62,16 +103,19 @@ export default class Modal extends Component {
       <ModalWrapper visable={this.props.visable}>
         <ModalContainer>
           {this.props.modalHeader.length > 0 && (
-            <ModalHead>{this.props.modalHeader}</ModalHead>
+            <ModalHead>
+              <img alt="Blue clock icon" src={timeBlue} />
+              {this.props.modalHeader}
+              <button onClick={() => this.props.onSubmit2()}>
+                <img alt="X button" src={closeX} />
+              </button>
+            </ModalHead>
           )}
           {this.props.children}
           <ModalFooter>
             <button onClick={() => this.props.onSubmit()}>
               {this.props.modalFooterSubmit}
             </button>
-            <button onClick={() => this.props.onSubmit2()}>
-              {this.props.modalFooterSubmit2}
-            </button>
           </ModalFooter>
         </ModalContainer>
       </ModalWrapper>
diff --git a/src/components/Modal/x.png b/src/components/Modal/x.png
new file mode 100644
index 0000000..d83454f
Binary files /dev/null and b/src/components/Modal/x.png differ
diff --git a/src/redux/locale/locale.js b/src/redux/locale/locale.js
index d05a252..fee4c46 100644
--- a/src/redux/locale/locale.js
+++ b/src/redux/locale/locale.js
@@ -11,9 +11,9 @@ const strings = new LocalizedStrings({
     start: 'Start',
     end: 'End',
     note: 'Note',
-    optional: 'Optional',
-    bookTime: 'Book Time',
-    closeModal: 'Close Modal',
+    optional: '(Optional)',
+    bookTime: 'Book',
+    closeModal: 'Close Window',
   },
   is: {
     time: 'Tími',
@@ -25,9 +25,9 @@ const strings = new LocalizedStrings({
     start: 'Byrjar',
     end: 'Endar',
     note: 'Athugasemd',
-    optional: 'valfrjálst',
-    bookTime: 'Bóka Tíma',
-    closeModal: 'Loka Modal',
+    optional: '(Valfrjálst)',
+    bookTime: 'Bóka',
+    closeModal: 'Loka Glugga',
   },
 });