diff --git a/cityLine.jsx b/cityLine.jsx
new file mode 100644
index 0000000..c8954a8
--- /dev/null
+++ b/cityLine.jsx
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import './component-styling.css'
+
+
+class CityLine extends Component {
+    state = {
+        cityline:[{number : '1,3,5,6,7,3,9,10,9,34,56,78,90,123,457,89'}
+    
+    ]
+      }
+    render() { 
+        return (
+            <div className='grid-item'>
+                            <table className="table">
+                <thead>
+                <tr>
+                    <th>LINE</th>
+                </tr>
+                </thead>
+
+            <tbody className="tbody">
+                {this.state.cityline.map(line =>
+                    
+                    <tr>
+                    <td>{line.number}</td>
+                </tr>
+                  )}
+               
+            </tbody>
+            </table>
+            </div>
+         );
+    }
+}
+ 
+export default CityLine;
\ No newline at end of file
diff --git a/operator.jsx b/operator.jsx
new file mode 100644
index 0000000..97bfc47
--- /dev/null
+++ b/operator.jsx
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import './component-styling.css'
+
+class Operator extends Component {
+    state ={operator: [
+
+           {name: 'DKK',description:'bus government',link:'www.ddk.com'},
+           {name: 'aftu',description:'bus private',link:'www.aftu.com'},
+           {name: 'taxi bagage',description:'taxi private',link:'www.taxi.com'},
+           {name: 'clando',description:'clando dakar',link:'www.clando.com'},
+           {name: 'taxi halo',description:'taxi dorkat',link:'www.dorkat.com'}
+
+    ]};
+
+/**
+ * once we have the database done instead of writiing the 
+ * opera.name ,opera.description and operator.link
+ * we will be using the format :
+ * {opera.name},{opera.description},{opera.link}
+ */
+     
+    render() { 
+        return (
+            <div className='grid-item'>
+                                <table className="table">
+                    <thead>
+                        <tr>
+                            <th scope='col'>Name</th>
+                            <th scope='col'>Description</th>
+                            <th scope='col'>Link/Info</th>
+                        </tr>
+                    </thead>
+                
+                <tbody className="tbody">
+                    {this.state.operator.map(opera =>
+                        
+                        <tr>
+                        <td scope='row'>{opera.name}</td>
+                    <td scope='row'>{opera.description}</td>
+                    <td scope='row'>{opera.link}</td>
+                    </tr>
+                        )}
+                 
+                </tbody>
+                </table>
+            </div>
+          );
+    }
+}
+ 
+export default Operator;
\ No newline at end of file
diff --git a/ticket.jsx b/ticket.jsx
new file mode 100644
index 0000000..f5fc943
--- /dev/null
+++ b/ticket.jsx
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import './component-styling.css'
+
+class Ticket extends Component {
+    state = {ticket :[ 
+
+        {price:'150fr',duration:'20min'},
+        {price:'200fr',duration:'30min'},
+        {price:'350fr',duration:'40min'},
+        {price:'450fr',duration:'50min'},
+        {price:'500fr',duration:'60min'},
+        {price:'180fr',duration:'35min'},
+        {price:'100fr',duration:'10min'}
+
+    ]
+     };
+    render() { 
+        return (
+            <div className='grid-item'>
+                            <table className="table">
+                <thead>
+                    <tr>
+                        <th scope='col'>Price</th>
+                        <th scope='col'>Duration</th>
+                    </tr>
+                </thead>
+                <tbody className="tbody">
+                {this.state.ticket.map(tic=>
+                    <tr>
+                        <td scope='row'>{tic.price}</td>
+                        <td scope='row'>{tic.duration}</td>
+                    </tr>
+                    )}
+                   
+                </tbody>
+            </table>
+            </div>
+          );
+    }
+}
+ 
+export default Ticket;
\ No newline at end of file
diff --git a/travelplanner.jsx b/travelplanner.jsx
new file mode 100644
index 0000000..246c60b
--- /dev/null
+++ b/travelplanner.jsx
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import './component-styling.css'
+//import TravelPlanner from './travelplanner';
+
+class TravelPlanner extends Component {
+    state = { travel:[
+
+          {tata:'http://aftu-senegal.org/',bus:'http://demdikk.com/senegal_dem_dikk/',taxi:'http://taxi.com/senegal'}
+          
+
+     ] };
+    render() { 
+        return (
+            <div className='grid-item'>
+                            <table className="table">
+                <thead>
+              
+                    <tr>
+                   <th scope='col'>Bus</th>
+                    <th scope='col'>Tata</th>
+                    <th scope='col'>taxi</th>
+                    </tr>
+                
+                </thead>
+                <tbody className="tboby">
+                    {this.state.travel.map(travels=>
+                        
+                        <tr>
+                        <td scope='row'>{travels.bus}</td>
+                        <td scope='row'>{travels.tata}</td>
+                        <td scope='row'>{travels.taxi}</td>
+                    </tr>
+                        )}
+                   
+                </tbody>
+            </table>
+            </div>
+
+         );
+    }
+}
+ 
+export default TravelPlanner;
\ No newline at end of file
diff --git a/vehicule.jsx b/vehicule.jsx
new file mode 100644
index 0000000..de50145
--- /dev/null
+++ b/vehicule.jsx
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import './component-styling.css'
+//import './images';
+
+class Vehicule extends Component {
+    state = { 
+    
+       imageStop: 'images/abris-bus.jpg',
+       vehiculColorDKK:"http://demdikk.com/bonne-fete-de-lindependance/",
+       vehiculeColorTata:"http://aftu-senegal.org/a-propos",
+       taxiImage:"images/taxi.jpg"
+
+     }
+    render() { 
+        return (
+            <div className='grid-item'>
+                            <div action="" className="form">
+               
+               <div src='images/abris-bus.jpg'>
+                   
+                   <p>Bus Dem Dikk</p>
+               </div>
+               <div>
+               <img src={this.state.vehiculColorDKK} alt=""/>
+                   Bus Dem Dikk
+               </div>
+               <div>
+               <img src={this.state.vehiculeColorTata} alt=""/>
+                  <p> Bus Tata</p>
+               </div>
+               <div> 
+               <img src={this.state.imageStop} alt=""/>
+                   Stop
+               </div>
+           
+       </div>
+            </div>
+        );
+    }
+}
+ 
+export default Vehicule;
\ No newline at end of file