diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 92f956e..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index a754b20..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/App.js b/src/components/App.js
similarity index 83%
rename from src/App.js
rename to src/components/App.js
index 6415a98..86d1817 100644
--- a/src/App.js
+++ b/src/components/App.js
@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
-import Header from './components/Header';
+import Header from './Header';
 import {
   BrowserRouter as Router, Route,
   Switch,
 } from 'react-router-dom';
-import Map from './components/Map';
-import Vegetables from './components/Vegetables';
-
-import './App.css';
+import Map from './Map';
+import Home from './Home';
+import Vegetables from './Vegetables';
 
 class App extends Component {
   constructor(props) {
@@ -42,7 +41,8 @@ class App extends Component {
         <Header></Header>
         <Router>
           <Switch>
-            <Route exact path="/" component={Map} />
+            <Route exact path="/" component={Home} />
+            <Route exact path="/carte" component={Map} />
             <Route exact path="/vegetaux" component={Vegetables} />
             <Route exact path="/vegetaux/:id-:slug" component={Vegetables} />
           </Switch>
diff --git a/src/components/Header.js b/src/components/Header.js
index 5cc21a8..3a496af 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -27,6 +27,7 @@ import {
 } from 'react-notifications';
 import strToSlug from '../StrToSlug';
 
+import '../css/Header.css'
 
 export default class Header extends React.Component {
   constructor(props) {
@@ -71,7 +72,7 @@ export default class Header extends React.Component {
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="ml-auto" navbar>
               <NavItem>
-                <NavLink href="/">Carte</NavLink>
+                <NavLink href="/carte">Carte</NavLink>
               </NavItem>
               <UncontrolledDropdown nav inNavbar>
                 <DropdownToggle nav caret>
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..9ff0ecb
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Container,
+  Row,
+  Col
+} from 'reactstrap';
+
+import '../css/Home.css';
+
+export default class Home extends React.Component {
+
+  render() {
+    return (
+      <Container>
+        <Row>
+          <Col xs="12" className=" with-border with-background">
+            <img src="/logo.png" className="logo float-left" alt="RodiVert" />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu varius sem pulvinar porta eget at felis. Curabitur euismod libero erat, id sagittis nunc hendrerit vitae. Nulla facilisis lobortis quam sit amet pellentesque. Vestibulum eget justo ut enim pretium iaculis sit amet eu ex. Suspendisse potenti. Curabitur ac justo ligula. Proin molestie vestibulum metus, eget dignissim enim euismod in. Nam at neque nisi.
+            </p>
+            <p>
+              Pellentesque luctus dignissim orci a tempus. Nam eget sem consectetur, dignissim ante sed, laoreet mi. Ut efficitur at nibh quis efficitur. Ut accumsan ultricies felis id sodales. Fusce hendrerit mi neque, eget consequat nibh lobortis at. Nunc ligula elit, efficitur id mauris a, congue aliquet nibh. In congue enim metus, a mattis velit vehicula id. Nunc commodo magna sit amet vulputate condimentum. Integer vitae pretium dui. Vestibulum ut convallis velit. Pellentesque vehicula finibus viverra. Nam a elit sapien. Praesent laoreet est ac nisl dapibus, non porttitor est placerat. Aenean vitae tellus convallis, venenatis felis in, venenatis augue. Maecenas id finibus arcu, vitae dignissim tellus. Duis eget metus turpis.
+            </p>
+            <p>
+              Nulla sed mauris non mi efficitur suscipit. Praesent tincidunt metus in justo viverra, non condimentum lectus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque non tempus ligula, non fermentum velit. Nunc metus ipsum, luctus quis venenatis sed, efficitur ut eros. Nullam vitae risus at orci fringilla faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra at mi hendrerit blandit. Praesent tempus at massa in finibus. Suspendisse id lacus auctor, pretium erat varius, scelerisque neque. Etiam tincidunt et est ac cursus. Sed nec neque fringilla, mollis enim sit amet, tristique massa. Aliquam erat volutpat. Suspendisse semper aliquam diam sit amet porttitor. Praesent eget elit vel tortor iaculis ornare ac congue lacus.
+            </p>
+            <p>
+              Suspendisse semper, orci non porttitor semper, elit ligula euismod turpis, sed facilisis ligula eros eget urna. Praesent facilisis nulla interdum mauris cursus cursus. In massa sapien, condimentum eget est eleifend, varius pellentesque velit. Nunc vitae eros sed ex mollis lacinia vitae vel augue. Proin sed metus velit. Aliquam eget justo ornare, dictum ipsum vitae, fermentum purus. Curabitur mollis arcu sed libero porta, et porta ante interdum. Integer non viverra purus.
+            </p>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/components/Map.js b/src/components/Map.js
index 153b4fc..61d149a 100644
--- a/src/components/Map.js
+++ b/src/components/Map.js
@@ -21,6 +21,7 @@ import {
 } from 'react-router-dom';
 import strToSlug from '../StrToSlug'
 
+import '../css/Map.css'
 
 const MapDimensions = {
   width: 734,
@@ -135,8 +136,8 @@ export default class Map extends React.Component {
       <Container>
         <NotificationContainer />
         <Row>
-          <Col xs="8">
-            <Row>
+          <Col xs="12" sm="8">
+            <Row className="with-margin">
               <Col className="with-border with-background">
                 <div id="MapContainer">
                   <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
@@ -164,38 +165,46 @@ export default class Map extends React.Component {
               </Col>
             </Row>
           </Col>
-          <Col xs="4">
+          <Col xs="12" sm="4">
             <Row>
-              <Col className="with-border with-background" xs="12">
-                <ListGroup className='vegetables--types--group'>
-                  {
-                    this.state.types.map((type, key) =>
-                      (
-                        <ListGroupItem
-                          key={key}
-                          className={this.state.selectedType.id === type.id ? "selected" : "null"} onClick={(e) => this.selectType(type)}>
-                          {type.name}
-                          <Badge pill>{type.Vegetables.length}</Badge>
-                        </ListGroupItem>
-                      )
-                    )
-                  }
-                </ListGroup>
+              <Col xs="6" sm="12">
+                <div className="with-margin">
+                  <div className=" with-border with-background">
+                    <ListGroup className='vegetables--types--group'>
+                      {
+                        this.state.types.map((type, key) =>
+                          (
+                            <ListGroupItem
+                              key={key}
+                              className={this.state.selectedType.id === type.id ? "selected" : "null"} onClick={(e) => this.selectType(type)}>
+                              {type.name}
+                              <Badge pill>{type.Vegetables.length}</Badge>
+                            </ListGroupItem>
+                          )
+                        )
+                      }
+                    </ListGroup>
+                  </div>
+                </div>
               </Col>
-              <Col className="with-border with-background" xs="12">
-                <ListGroup className='vegetables--types--group'>
-                  {
-                    this.state.selectedType &&
-                    this.state.selectedType.Vegetables &&
-                    this.state.selectedType.Vegetables.map((vegetable, key) =>
-                      (
-                        <ListGroupItem key={key} className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"} onMouseOver={(e) => this.selectVegetable(vegetable)}>
-                          {vegetable.name}
-                        </ListGroupItem>
-                      )
-                    )
-                  }
-                </ListGroup>
+              <Col xs="6" sm="12">
+                <div className="with-margin">
+                  <div className=" with-border with-background">
+                    <ListGroup className='vegetables--types--group'>
+                      {
+                        this.state.selectedType &&
+                        this.state.selectedType.Vegetables &&
+                        this.state.selectedType.Vegetables.map((vegetable, key) =>
+                          (
+                            <ListGroupItem key={key} className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"} onMouseOver={(e) => this.selectVegetable(vegetable)}>
+                              {vegetable.name}
+                            </ListGroupItem>
+                          )
+                        )
+                      }
+                    </ListGroup>
+                  </div>
+                </div>
               </Col>
             </Row>
           </Col>
diff --git a/src/css/Header.css b/src/css/Header.css
new file mode 100644
index 0000000..37319f8
--- /dev/null
+++ b/src/css/Header.css
@@ -0,0 +1,21 @@
+.navbar-collapse {
+  flex-grow: unset !important;
+}
+
+.nav-item {
+  padding: 0 16px;
+  border-left: 1px solid #ccc;
+}
+
+.navbar.navbar-expand-md.navbar-light.bg-light {
+  box-shadow: 0 2px 2px #a7a7a7;
+  margin-bottom: 16px;
+}
+
+.nav-link .text {
+  padding-right: 32px;
+}
+.nav-link .badge {
+  position: absolute;
+  right: 24px;
+}
\ No newline at end of file
diff --git a/src/css/Home.css b/src/css/Home.css
new file mode 100644
index 0000000..617f26e
--- /dev/null
+++ b/src/css/Home.css
@@ -0,0 +1,3 @@
+.logo {
+  margin: 0 16px 16px 0;
+}
\ No newline at end of file
diff --git a/src/css/Map.css b/src/css/Map.css
new file mode 100644
index 0000000..3b6ef0b
--- /dev/null
+++ b/src/css/Map.css
@@ -0,0 +1,49 @@
+
+.map {
+  width: 734px;
+  height: 530px;
+  background: url('/plan.jpg');
+  background-size: cover;
+  position: relative;
+}
+.mapMarker {
+position: absolute;
+left: 25%;
+top: 33%;
+}
+
+.mapMarker svg {
+  color: #dc3545;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+.mapMarker.selected svg {
+  color: #007bff;
+  animation: bounce 0.7s ease 5;
+}
+
+@keyframes bounce{
+  from {margin-top: 0;}
+  50%  {margin-top: 8px;}
+  to   {margin-top: 0;}
+}
+
+.vegetables--types--group li {
+  cursor: pointer;
+  text-align: left;
+}
+
+.vegetables--types--group li:hover {
+  background: #fafafa;
+  opacity: 0.6;
+}
+
+.vegetables--types--group li.selected {
+  background: #f1f1f1;
+  font-weight: bold;
+}
+
+.vegetables--types--group .badge {
+  margin-left: 8px;
+}
diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 0000000..55121de
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url('/background/1.jpg') no-repeat fixed;
+  background-size: cover;
+  background-position: center center;
+}
+
+.with-border {
+  box-shadow: 4px 4px 6px #a7a7a7;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  /* margin: 16px; */
+  padding: 8px;
+}
+
+.with-margin {
+  margin: 8px;
+}
+
+@media (max-width: 575.98px) { 
+  .with-margin {
+    margin: 8px 0;
+  }
+}
+
+.with-background {
+  background-color: rgba(248,249,250, 0.7) !important;
+}
+
+.container {
+  margin-top: 116px;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index f075ea3..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,108 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: url('/background/1.jpg') no-repeat fixed;
-  background-size: cover;
-  background-position: center center;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-
-.navbar-collapse {
-  flex-grow: unset !important;
-}
-
-.nav-item {
-  padding: 0 16px;
-  border-left: 1px solid #ccc;
-}
-
-.navbar.navbar-expand-md.navbar-light.bg-light {
-  /* background-color: rgba(248,249,250, 0.8) !important; */
-  box-shadow: 0 2px 2px #a7a7a7;
-  margin-bottom: 16px;
-}
-
-.with-border {
-  box-shadow: 4px 4px 6px #a7a7a7;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  margin: 16px;
-  padding: 8px;
-}
-
-.with-background {
-  /* background: #f8f9fa; */
-  background-color: rgba(248,249,250, 0.7) !important;
- 
-}
-
-.container {
-  margin-top: 116px;
-}
-
-.nav-link .text {
-  padding-right: 32px;
-}
-.nav-link .badge {
-  position: absolute;
-  right: 24px;
-}
-
-.vegetables--types--group li {
-  cursor: pointer;
-  text-align: left;
-}
-
-.vegetables--types--group li:hover {
-  background: #fafafa;
-  opacity: 0.6;
-}
-
-.vegetables--types--group li.selected {
-  background: #f1f1f1;
-  font-weight: bold;
-}
-
-.vegetables--types--group .badge {
-  margin-left: 8px;
-}
-
-.map {
-  width: 734px;
-  height: 530px;
-  background: url('/plan.jpg');
-  background-size: cover;
-  position: relative;
-}
-.mapMarker {
-position: absolute;
-left: 25%;
-top: 33%;
-}
-
-.mapMarker svg {
-  color: #dc3545;
-  font-size: 2rem;
-  cursor: pointer;
-}
-
-.mapMarker.selected svg {
-  color: #007bff;
-  animation: bounce 0.7s ease 5;
-}
-
-@keyframes bounce{
-  from {margin-top: 0;}
-  50%  {margin-top: 8px;}
-  to   {margin-top: 0;}
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 762b066..68871a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 import 'react-notifications/lib/notifications.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
+import './css/index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>