diff --git a/npm-debug.log b/npm-debug.log
index 64789aa0ecf0429331f18935ee15cde5287804d9..64b6e0d0633f788523237c24bee768ac8e5f2e5a 100644
--- a/npm-debug.log
+++ b/npm-debug.log
@@ -7,7 +7,7 @@
 4 verbose stack Error: ENOENT: no such file or directory, open '/home/gustavo/Documentos/SMPPIR-Checkin-Portal/package.json'
 4 verbose stack     at Error (native)
 5 verbose cwd /home/gustavo/Documentos/SMPPIR-Checkin-Portal
-6 error Linux 4.13.0-41-generic
+6 error Linux 4.13.0-43-generic
 7 error argv "/home/gustavo/.nvm/versions/node/v6.9.0/bin/node" "/home/gustavo/.nvm/versions/node/v6.9.0/bin/npm" "start"
 8 error node v6.9.0
 9 error npm  v3.10.8
diff --git a/smppir-checkin-portal/src/App.css b/smppir-checkin-portal/src/App.css
index c5c6e8a68adcb5249ebdf283ffb34b8531d8b1f0..5f33054ebae736fccf48754387c5c5d56245b2fb 100644
--- a/smppir-checkin-portal/src/App.css
+++ b/smppir-checkin-portal/src/App.css
@@ -26,3 +26,7 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.material-icons{
+  color: black;
+}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Components/AppFooter.js b/smppir-checkin-portal/src/Components/AppFooter.js
index 46bd668b81278e95d7e844706b964f7a97f5a729..c29749236c7a8ddba01a40d71c87063cc30dd60d 100644
--- a/smppir-checkin-portal/src/Components/AppFooter.js
+++ b/smppir-checkin-portal/src/Components/AppFooter.js
@@ -20,7 +20,6 @@ class AppFooter extends Component {
         >
           <h4 className='smppir-blue'>PARCEIROS</h4>
           <Partner />
-          
         </Footer>
       </div>
     );
diff --git a/smppir-checkin-portal/src/Components/Button.js b/smppir-checkin-portal/src/Components/Button.js
index 1eea0a84d76cb6c4e0645e751fe3e8a59b1399c7..423de6e69228692f5ecaf8a7cea7e8ed156095aa 100644
--- a/smppir-checkin-portal/src/Components/Button.js
+++ b/smppir-checkin-portal/src/Components/Button.js
@@ -6,8 +6,10 @@ import { width } from 'window-size';
 class AppFooter extends Component {
   render() {
     return (
-      <div>
-        <a id='loginButton' className='z-depth-1 waves-effect waves-light' href='/login' > LOGIN </a>
+      <div id={this.props.id} className={this.props.classes}>
+        <a id='loginButton' className='z-depth-1 waves-effect waves-light' href={this.props.reference} > 
+          {this.props.name ? this.props.name.toUpperCase() : ""} 
+        </a>
       </div>
     );
   }
diff --git a/smppir-checkin-portal/src/Components/ContactForm.js b/smppir-checkin-portal/src/Components/ContactForm.js
index 67173988043bd40311f14454a533d5328295f178..2a03afdbcabf0e913e942ef79fc2dba0be6a03a5 100644
--- a/smppir-checkin-portal/src/Components/ContactForm.js
+++ b/smppir-checkin-portal/src/Components/ContactForm.js
@@ -21,7 +21,7 @@ class ContactForm extends Component {
           <Input s={12} label="Nome" className='contactFormInput' value={this.state.name} onChange={this.handleNameChange.bind(this)} />
           <Input type="email" label="Email" s={12} className='contactFormInput' value={this.state.email} onChange={this.handleEmailChange.bind(this)} />
           <Input type="textarea" label="Digite aqui sua mensagem" s={12} className='contactFormInput' value={this.state.message} onChange={this.handleMessageChange.bind(this)}/>
-          <Button waves='light' className='smppir-blue-text' id='contactSendBtn' onClick={this.handleSubmit} >ENVIAR</Button>
+          <Button waves='light' className='green' id='contactSendBtn' onClick={this.handleSubmit} >ENVIAR</Button>
         </Row>
       </div>
     );
diff --git a/smppir-checkin-portal/src/Components/NavigationBar.js b/smppir-checkin-portal/src/Components/NavigationBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..2912e8ddcc3a73d1744fdfa27e5361cac88d26ff
--- /dev/null
+++ b/smppir-checkin-portal/src/Components/NavigationBar.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Navbar, NavItem } from 'react-materialize'
+import logo from '../Images/logo.png'
+
+import '../Styles/NavigationBar.css'
+
+class NavigationBar extends Component {
+
+  render() {
+    const logoNode = <div className='demo' > 
+      <img style="vertical-align:middle" id={'bannerLogo'} src={logo} style={{width: 40}}/>
+      <span id='teste'>SMPPIR-CheckIn</span>
+    </div>
+      
+    return (
+        <Navbar brand={logoNode} right>
+          {this.props.button}
+        </Navbar>
+    );
+  }
+}
+
+export default NavigationBar;
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Pages/Login.js b/smppir-checkin-portal/src/Pages/Login.js
index 774aa9742ad2ccde3c705a5fef3fb169c1452090..7b75bf17e0221bb4dced05be0c7f56aeee861665 100644
--- a/smppir-checkin-portal/src/Pages/Login.js
+++ b/smppir-checkin-portal/src/Pages/Login.js
@@ -5,16 +5,19 @@ import { Card, Row, Col, Preloader, Input, Breadcrumb, MenuItem } from 'react-ma
 import logo from '../Images/logo.png'
 import AppFooter from '../Components/AppFooter'
 import Button from '../Components/Button'
+import NavigationBar from '../Components/NavigationBar'
 
-import '../Styles/Login.css'
+import './Styles/Login.css'
 
 class MainPage extends Component { 
   render() {
     return (
         <div>
           <BarraBrasil/>
-          <div>
-            <Card id='mainBannerCard' className='white' textClassName='white-text' >
+          <NavigationBar/>
+
+          {/* <div>
+            <Card id='mainBannerCard' className='white' textClassName='white-text'>
               <Row>
                 <Col s={12} m={6}>
                   <img alt='Logo do SMPPIR-Checkin com descrição' id={'bannerLogo'} src={logo} style={{width: 70}}/>
@@ -26,20 +29,17 @@ class MainPage extends Component {
                 </Col>
               </Row>
             </Card>
-          </div>
+          </div> */}
           <Breadcrumb>
             <MenuItem href='/'>Home </MenuItem>
             <MenuItem>Login</MenuItem>
           </Breadcrumb>
             <Row>
             <Col offset={"s1 m3"} s={10} m={6}>
-              <Card title='Entrar' className='white' textClassName='black-text'>
+              <Card title='Entrar' className='white' textClassName='black-text' actions={[<Button classes={'right-align'} name={'Login'}/>]} >
                 <Row>
                   <Input type="email" label="E-mail" s={12} />
                   <Input type="password" label="Senha" s={12} />
-                  <Row >
-                   <Button/>
-                  </Row>
                 </Row>
               </Card>
             </Col>
diff --git a/smppir-checkin-portal/src/Pages/MainPage.js b/smppir-checkin-portal/src/Pages/MainPage.js
index 4cc91b1b27b3afafdc965a2a657068fc584956ef..7e8af47026d7198b75df642a5d31e890425e6145 100644
--- a/smppir-checkin-portal/src/Pages/MainPage.js
+++ b/smppir-checkin-portal/src/Pages/MainPage.js
@@ -2,32 +2,18 @@ import React, { Component } from 'react';
 import './Styles/MainPage.css';
 import BarraBrasil from '../Components/BarraBrasil'
 import { Card, Row, Col, Preloader } from 'react-materialize'
-import logo from '../Images/logo.png'
+import logo from '../Images/logo2.png'
 import AppFooter from '../Components/AppFooter'
 import Button from '../Components/Button'
+import NavigationBar from '../Components/NavigationBar'
+import { Navbar, NavItem } from 'react-materialize'
 
 class MainPage extends Component {
   render() {
     return (
       <div>
         <BarraBrasil />
-        <div>
-        <Card id='mainBannerCard' className='white' textClassName='white-text' >
-          <Row>
-            <Col s={12} m={6}>
-              <img alt='Logo do SMPPIR-Checkin com descrição' id={'bannerLogo'} src={logo} style={{width: 70}}/>
-            </Col>
-            <Col s={12} m={4} offset={'m1'}>
-              <p id='bannerText'>
-                Teste SMPPIR-Checkin
-              </p>
-            </Col>
-            <Col s={12} m={2} offset={'m1'}>
-              <Button/>
-            </Col>
-          </Row>
-		    </Card>
-        </div>
+        <NavigationBar button={<NavItem id={'login-btn'} href='/login'>Login</NavItem>}/>
         <Row>
           <Col id='map' s={4}>
           <Preloader size='big'/>
diff --git a/smppir-checkin-portal/src/Styles/Login.css b/smppir-checkin-portal/src/Pages/Styles/Login.css
similarity index 100%
rename from smppir-checkin-portal/src/Styles/Login.css
rename to smppir-checkin-portal/src/Pages/Styles/Login.css
diff --git a/smppir-checkin-portal/src/Pages/Styles/MainPage.css b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
index 72237efbde2c70c111a42ec9ad852d0c75819264..c6a4954f409d2d1991d2db3255b82c0e806f929a 100644
--- a/smppir-checkin-portal/src/Pages/Styles/MainPage.css
+++ b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
@@ -10,7 +10,7 @@
 
 #bannerLogo{
     margin-left: 20%;
-    margin-top: 1%;
+    margin-top: 2%;
 }
 
 #map{
diff --git a/smppir-checkin-portal/src/Styles/Button.css b/smppir-checkin-portal/src/Styles/Button.css
index 8b456cb68068c314eebab2a99fd6c8a5a1eb80d6..459c6844c88030ae884396f637aaf04ae55e81c8 100644
--- a/smppir-checkin-portal/src/Styles/Button.css
+++ b/smppir-checkin-portal/src/Styles/Button.css
@@ -1,8 +1,10 @@
 #loginButton{
     width: 100px;
+    height: 30px;
     text-align: center;
-    margin-left: 180%;
-    margin-top: 5%;
+    line-height: 20px;
+    /* margin-left: 180%; */
+    /* margin-top: 5%; */
     background-color: green;
     color: white;
     padding-top: 5px;
@@ -14,4 +16,6 @@
 
 #loginButton:hover{
     background-color: rgb(0, 85, 0);
-}
\ No newline at end of file
+}
+
+.verticalAlignCenter{}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Styles/NavigationBar.css b/smppir-checkin-portal/src/Styles/NavigationBar.css
new file mode 100644
index 0000000000000000000000000000000000000000..c79a481ec5af0789e2c0798a2c21ff16c48fe12b
--- /dev/null
+++ b/smppir-checkin-portal/src/Styles/NavigationBar.css
@@ -0,0 +1,38 @@
+ul.z-depth-2{
+    box-shadow: none;
+}
+
+.nav-wrapper{
+    background-color: white;
+    color: black;
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+}
+
+nav ul a{
+    background-color: white;
+    color: black;
+}
+
+nav .brand-logo{
+    color: black;
+}
+
+.demo div{
+    float: left;
+    clear: none;
+}
+
+/* .nav-wrapper > div > ul{
+    height: 40px;
+    width: 120px;
+} */
+
+#login-btn{ 
+    background-color: rgb(168, 235, 168); 
+}
+
+#teste{
+    vertical-align: top;
+    margin-left: 20px;
+}
\ No newline at end of file