diff --git a/Web/src/app/pages/maps/maps.component.html b/Web/src/app/pages/maps/maps.component.html
index f108a6a6b..64ebabb3f 100644
--- a/Web/src/app/pages/maps/maps.component.html
+++ b/Web/src/app/pages/maps/maps.component.html
@@ -3,7 +3,7 @@
 
 
 
-  <nav *ngIf='!showSpesific'>
+  <nav *ngIf='!_choosen'>
       <button class='btn_select' id='reportLable' (click)='select(1)'>
       {{reportLable}}
     </button>
@@ -17,15 +17,15 @@
       {{showAllLabel}}
     </button>
   </nav>
-  <div class='map_div' *ngIf='showSpesific'>
-    <sebm-google-map [latitude]="showSpesific.lat" [longitude]="showSpesific.lng" [zoom]='zoom'>
-          <sebm-google-map-marker [latitude]="showSpesific.lat" [longitude]="showSpesific.lng">        
+  <div class='map_div' *ngIf='_choosen'>
+    <sebm-google-map [latitude]="_choosen.lat" [longitude]="_choosen.lng" [zoom]='zoom'>
+          <sebm-google-map-marker [latitude]="_choosen.lat" [longitude]="_choosen.lng">        
           </sebm-google-map-marker>
     </sebm-google-map>
   </div>
 
   
-  <div class='map_div' *ngIf='!showSpesific'>
+  <div class='map_div' *ngIf='!_choosen'>
     
     <sebm-google-map *ngIf='showAll' [latitude]="lat" [longitude]="lng" [zoom]='zoom'>
       <div *ngIf='reports'>
diff --git a/Web/src/app/pages/maps/maps.component.ts b/Web/src/app/pages/maps/maps.component.ts
index 384cd5dbf..df130d8c6 100644
--- a/Web/src/app/pages/maps/maps.component.ts
+++ b/Web/src/app/pages/maps/maps.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { MapsService } from "../../service/maps/maps.service";
-import { SebmGoogleMap, SebmGoogleMapPolygon, LatLngLiteral , SebmGoogleMapMarker} from "angular2-google-maps/core";
+import { SebmGoogleMap, SebmGoogleMapInfoWindow, SebmGoogleMapPolygon, LatLngLiteral , SebmGoogleMapMarker} from "angular2-google-maps/core";
 import { UserService } from "../../service/user/user.service";
 import { ReportService } from "../../service/report/report.service";
 import { Report } from "../../models/Report";
@@ -18,7 +18,8 @@ export class MapsComponent implements OnInit {
   @Input() reports: Report[] = null;
   @Input() hot: Report[] = null;
   @Input() cold: Location[] = null;
-
+  @Input() reportChoosen: Report = null;
+  @Input() choosen: any = null;
 
   lat: number;
   lng: number;
@@ -71,6 +72,20 @@ export class MapsComponent implements OnInit {
     this.showAll = false;
   }
 
+  get _choosen(){
+    if(this.choosen)
+      if(!this.choosen.lat)
+        this.choosen = this.choosen.location;
+    return this.choosen;
+  }
+
+  set _choosen(c){
+    if(c.lat)
+      this.choosen = c;
+    else
+      this.choosen = c.location;
+  }
+
   ngOnInit() {
   }
 
diff --git a/Web/src/app/pages/show-report/show-report.component.css b/Web/src/app/pages/show-report/show-report.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Web/src/app/pages/show-report/show-report.component.html b/Web/src/app/pages/show-report/show-report.component.html
index c647c9e3f..8da0baa03 100644
--- a/Web/src/app/pages/show-report/show-report.component.html
+++ b/Web/src/app/pages/show-report/show-report.component.html
@@ -1,2 +1,16 @@
 <main *ngIf='report'>
+  <<div class='title'>
+    <!--<span>{{report.summary}}</span>-->
+    <span>{{report.date | date:'dd.MM.yy'}}</span>
+    <span>{{report.date | date:'HH:mm'}}</span>
+    <span>{{report.location | locationName}}</span>
+    </div>
+
+
+    <div class='body'>
+      <div class='report-fields' *ngFor='let item of report.fields'>
+        <span>{{item.name}}</span>
+        <span>: {{item.data}} </span>
+      </div>
+    </div>
 </main>
\ No newline at end of file
diff --git a/Web/src/app/pages/show-report/show-report.component.scss b/Web/src/app/pages/show-report/show-report.component.scss
new file mode 100644
index 000000000..0278ca78e
--- /dev/null
+++ b/Web/src/app/pages/show-report/show-report.component.scss
@@ -0,0 +1,52 @@
+main{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    direction: rtl;
+    font-size: 16px;
+    .title{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 20%;
+        background-color: #004381;
+        color: white;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        span{
+            margin: 0 2px;
+        }
+    }
+    .body{
+        position: absolute;
+        top: 20%;
+        right: 0;
+        width: 100%;
+        height: 80%;
+        background-color: white;
+        color: black;
+        white-space: nowrap;
+        overflow: scroll;
+        text-overflow: ellipsis;
+        .report-fields{
+            display: block;
+            height: 20%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+            span{
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            
+        }  
+    }
+}
+
+::-webkit-scrollbar{
+    visibility: hidden;
+}
\ No newline at end of file
diff --git a/Web/src/app/pages/show-report/show-report.component.ts b/Web/src/app/pages/show-report/show-report.component.ts
index 8e3b99b71..3a4849916 100644
--- a/Web/src/app/pages/show-report/show-report.component.ts
+++ b/Web/src/app/pages/show-report/show-report.component.ts
@@ -4,7 +4,7 @@ import { Report } from "../../models/Report";
 @Component({
   selector: "show-report",
   templateUrl: "./show-report.component.html",
-  styleUrls: ["./show-report.component.css"]
+  styleUrls: ["./show-report.component.scss"]
 })
 export class ShowReportComponent implements OnInit {
 
diff --git a/Web/src/app/pages/show-shift/show-shift.component.html b/Web/src/app/pages/show-shift/show-shift.component.html
index faf9d570d..f30029fdc 100644
--- a/Web/src/app/pages/show-shift/show-shift.component.html
+++ b/Web/src/app/pages/show-shift/show-shift.component.html
@@ -1,6 +1,6 @@
-<main class='container' fxLayout=row>
+<main *ngIf='canShow' class='container' fxLayout=row>
   <aside class='shift_details' fxFlex=45>
-    <div>
+    <div *ngIf='shift.stratShift'>
       <span class="label">תאריך משמרת:</span>
       <span>{{shift.stratShift.date | date:'dd.MM.yyyy'}}</span>
       <br>
@@ -8,15 +8,18 @@
       <span>{{shift.stratShift.date | date:'HH:mm:ss'}}</span>
       <br>
       <span *ngIf='shift.stratShift.location'>
-     <span class="label">מיקום התחלה:</span> {{shift.stratShift.location | locationName}}
+        <span class="label">מיקום התחלה:</span> {{shift.stratShift.location | locationName}}
       </span>
     </div>
     <div *ngIf='shift.endShift'>
       <span class="label">שעת סיום משמרת:</span>
       <span>{{shift.endShift.date | date:'hh:mm:ss'}}</span>
       <br>
-      <span *ngIf='shift.stratShift.location'>
+      
        <span class="label">מיקום סיום:</span> {{shift.endShift.location | locationName}}
+      
+      <span *ngIf='!shift.stratShift.location'>
+       <span class="label">מיקום סיום:</span> דוח סיום לא הוזן
       </span>
     </div>
     <br>
@@ -30,48 +33,79 @@
       <span class="label">שמות המתנדבים בסיור:</span>
       <span *ngFor='let member of shift.team.members'>{{member.name}} , </span>
       <br>
-      <span>תחושת הצוות:</span>
-      <span>{{shift.endShift.filling}}</span>
+      <span *ngIf='shift.stratShift.filling'>
+        <span>תחושת הצוות:</span>
+        <span>{{shift.endShift.filling}}</span>
+      </span>
     </div>
 
     <div>
-    <table>
-    <tr class='table_head'>
-      <th>
-        נקודות קרות
-      </th>
-      <th>
-        נקודות חמות
-      </th>
-      <th>
-        דיווחים
-      </th>
-    </tr>
-
-    <tr class='table_body' *ngFor='let shift of data' >
-
-        <td>
-            {{show-shift.coldSpotArr[i].location| locationName}}
-        </td>
-        <td>
+      <table>
+        <tr class='table_head'>
+          <th>
+            נקודות קרות
+          </th>
+          <th>
+            נקודות חמות
+          </th>
+          <th>
+            דיווחים
+          </th>
+        </tr>
+
+        <tr class='table_body'>
+
+          <td>
+            <table>
+              <tr *ngFor='let item of coldSpotArr' (click)='choosen = item;'>
+                <td>{{item | locationName}}</td>
+              </tr>
+            </table>
+            <!--{{show-shift.coldSpotArr[i].location| locationName}}-->
+          </td>
+          <td>
+            <table>
+              <tr *ngFor='let item of hotSpotArr' (click)='choosen = item; reportChoose = item;'>
+                <td>
+                  {{item.date | date:'HH:mm'}}
+                </td>
+                <td>
+                  {{item.location | locationName}}
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td>
+            <table>
+              <tr *ngFor='let item of reportArr' (click)='choosen = item; reportChoose = item;'>
+                <td>
+                  {{item.date | date:'HH:mm'}}
+                </td>
+                <td>
+                  {{item.location | locationName}}
+                </td>
+              </tr>
+            </table>
+          </td>
+          <!--<td>
             {{show-shift.hotSpotArr[i].date | date:'dd.MM.yyyy'}}
             {{show-shift.hotSpotArr[i].location| locationName}}
         </td>
         <td>
           {{show-shift.reportArr[i].date | date:'dd.MM.yyyy'}}
           {{show-shift.reportArr[i].location| locationName}}
-        </td>
-      </tr>  
-    </table>
-   </div>    
+        </td>-->
+        </tr>
+      </table>
+    </div>
   </aside>
 
   <aside class='container details' fxLayout=column fxFlex=45>
     <section class='choose_details' fxFlex>
-      <show-report [report]='reportChoose'></show-report>
+      <show-report *ngIf='showReport' [report]='reportChoose'></show-report>
     </section>
     <section class='maps' fxFlex>
-      <app-maps [reports]='reports' [cold]='colds' [hot]='hots'>
+      <app-maps [reports]='reportArr' [cold]='coldSpotArr' [hot]='hotSpotArr' [choosen]='choosen'>
         <!--choosen היה פה משהו עם -->
       </app-maps>
     </section>
diff --git a/Web/src/app/pages/show-shift/show-shift.component.scss b/Web/src/app/pages/show-shift/show-shift.component.scss
index 1a8e9e6c3..0718d60ff 100644
--- a/Web/src/app/pages/show-shift/show-shift.component.scss
+++ b/Web/src/app/pages/show-shift/show-shift.component.scss
@@ -45,3 +45,8 @@ header{
     font-size: 15px;
 
 }
+
+
+show-report{
+    overflow: auto;
+}
\ No newline at end of file
diff --git a/Web/src/app/pages/show-shift/show-shift.component.ts b/Web/src/app/pages/show-shift/show-shift.component.ts
index 0cf9d75c8..5ae455a73 100644
--- a/Web/src/app/pages/show-shift/show-shift.component.ts
+++ b/Web/src/app/pages/show-shift/show-shift.component.ts
@@ -4,13 +4,15 @@ import { ActivatedRoute } from '@angular/router';
 import { FirebaseService } from '../../service/firebase/firebase.service';
 import { ShowReportComponent } from '../show-report/show-report.component';
 import { Report } from '../../models/Report';
-import {MapsComponent } from '../maps/maps.component';
+import { MapsComponent } from '../maps/maps.component';
 import { Location } from '../../models/Location';
+import { Observable } from 'rxjs';
 
 
 @Component({
   selector: 'app-show-shift',
   templateUrl: './show-shift.component.html',
+  // template: `<main></main>`,
   styleUrls: ['./show-shift.component.scss']
 })
 export class ShowShiftComponent implements OnInit, OnDestroy {
@@ -18,8 +20,8 @@ export class ShowShiftComponent implements OnInit, OnDestroy {
   isChoose: boolean;
   sub: any;
   shift: any;
-  id: number;
-  reportChoose: Report;
+  id: string;
+  _reportChoose: Report;
   reports: Report[]; //need to lead from firebase
   colds: Location[];
   hots: Report[];
@@ -27,100 +29,94 @@ export class ShowShiftComponent implements OnInit, OnDestroy {
   coldSpotArr: Location[];
   hotSpotArr: Report[];
   reportArr: Report[];
+  showReport: Observable<boolean>;
+  canShow: Observable<boolean>;
 
-  constructor(public route: ActivatedRoute, public firebaseService: FirebaseService) {
- 
-    this.shift = {
-  'coldSpotId' : [ '-KmDl2J3mpstECgPdqtm', '-KmDl2H3K25NmKIyRsMF', '-KmDhiNTwLsO4_7JGvHl', '-KmDes3KvxfN-2j7lBUJ', '-KmDensBBcfSBwSE4027' ],
-  'endShift' : {
-    'date' : '2017-06-09T21:37:30.723Z',
-    'dilemmas' : '',
-    'filling' : 'סבבה',
-    'location' : {
-      'lat' : 31.7238925,
-      'lng' : 35.2205135
-    },
-    'summary' : '',
-    'unusualEvents' : ''
-  },
-  'hotSpotId' : [ '-KmDU3cUhH2WNtXwG99Y' ],
-  'reportsId' : [ '-KmDeydV5qBAJjOsHfHf' ],
-  'stratShift' : {
-    'date' : '2017-06-09T20:11:29.346Z',
-    'location' : {
-      'lat' : 31.7243562,
-      'lng' : 35.2205931
-    }
-  },
-  'team' : {
-    'lead' : 'עידן',
-    'members' : [ {
-      'index' : 0,
-      'name' : 'עידן'
-    }, {
-      'index' : 1,
-      'name' : 'רותי'
-    }, {
-      'index' : 2,
-      'name' : 'עופר'
-    }, {
-      'index' : 3,
-      'name' : 'מתן'
-    } ],
-    'teamNum' : '2'
-  }
 
-}
 
-    // creating array of hot spots containing the hot spots of this shift:
-    this.hotSpotArr=[];
-    let hotSpot: Report;
-    for(let i=0; i< firebaseService.hotSpots.length; i++) {
-      hotSpot = this.firebaseService.getHotSpot(this.shift.hotSpotId[i]);
-      
-       if( hotSpot !=undefined){
-        // console.log(hotSpot);
-        this.hotSpotArr.push(hotSpot);
-       
-       }
-    }
-    console.log(this.hotSpotArr);
-
-    // creating array of cold spots containing the cold spots of this shift:
-    this.coldSpotArr=[];
-    let coldSpot: Location;
-    for(let i=0; i< firebaseService.coldSpots.length; i++) {
-    coldSpot = this.firebaseService.getColdSpot(this.shift.coldSpotId[i]);
+  constructor(public route: ActivatedRoute, public firebaseService: FirebaseService) {
+    this.canShow = new Observable(observer => {
+      observer.next(false);
+      observer.complete();
+    });
+    this.sub = this.route.params.subscribe(params => {
+      this.id = params["id"];
+      console.log(this.id);
+      this.shift = this.firebaseService.getShift(this.id);
+      console.log(this.shift);
       
-       if( coldSpot !=undefined){
-        this.coldSpotArr.push(coldSpot);
-       
-       }
-    }
-    console.log(this.coldSpotArr);
-
-    // creating array of reports containing the reports of this shift: 
-    this.reportArr=[];
-    let report: Report;
-    for(let i=0; i< firebaseService.reports.length; i++) {
-    report = this.firebaseService.getReport(this.shift.reportsId[i]);
+
+      this.hotSpotArr = [];
+      let hotSpot: Report;
+      if (this.shift.hotSpotId) {
+        for (let i = 0; i < this.shift.hotSpotId.length; i++) {
+          hotSpot = this.firebaseService.getHotSpot(this.shift.hotSpotId[i]);
+
+          if (hotSpot != undefined) {
+            // console.log(hotSpot);
+            this.hotSpotArr.push(hotSpot);
+
+          }
+        }
+        console.log(this.hotSpotArr);
+      }
+
+
+      // creating array of cold spots containing the cold spots of this shift:
+      this.coldSpotArr = [];
+      if (this.shift.coldSpotId) {
+        let coldSpot: Location;
+        for (let i = 0; i < this.shift.coldSpotId.length; i++) {
+          coldSpot = this.firebaseService.getColdSpot(this.shift.coldSpotId[i]);
+
+          if (coldSpot != undefined) {
+            this.coldSpotArr.push(coldSpot);
+
+          }
+        }
+        console.log(this.coldSpotArr);
+      }
+      // creating array of reports containing the reports of this shift: 
+      this.reportArr = [];
+      if (this.shift.reportsId) {
+        let report: Report;
+        for (let i = 0; i < this.shift.reportsId.length; i++) {
+          report = this.firebaseService.getReport(this.shift.reportsId[i]);
+
+          if (report != undefined) {
+            this.reportArr.push(report);
+
+          }
+        }
+        console.log(this.reportArr);
+      }
+      this.showReport = new Observable(observer => {
+        observer.next(false);
+        observer.complete();
+      });
+      this.canShow = new Observable(observer => {
+        observer.next(true);
+        observer.complete();
+      });
       
-       if( report !=undefined){
-        this.reportArr.push(report);
-       
-       }
-    }
-    console.log(this.reportArr);
+    });
 
-}
 
-    // this.sub = this.route.params.subscribe(params => {
-    //   this.shift = this.firebaseService.getShift(params['id']);
-    //   console.log(this.shift)
-    //   this.id = params['id'];
-    // });
-    // this.isChoose = false;
+    // creating array of hot spots containing the hot spots of this shift:
 
+  }
+
+
+  get reportChoose() {
+    return this._reportChoose;
+  }
+  set reportChoose(report: Report) {
+    this.showReport = new Observable(observer => {
+      observer.next(true);
+      observer.complete();
+    });
+    this._reportChoose = report;
+  }
 
   ngOnInit() {
 
diff --git a/Web/src/app/service/firebase/firebase.service.ts b/Web/src/app/service/firebase/firebase.service.ts
index 02c73e087..65c920933 100644
--- a/Web/src/app/service/firebase/firebase.service.ts
+++ b/Web/src/app/service/firebase/firebase.service.ts
@@ -64,6 +64,9 @@ export class FirebaseService {
 
 
     this.shiftObsarvable = afDb.list("shifts");
+    this.shiftObsarvable.subscribe(val=>{
+      this.shifts = val;
+    })
     this.reportObsarvable = afDb.list("reports");
     this.reportObsarvable.subscribe(val=>{
       console.log(val);
@@ -126,19 +129,17 @@ export class FirebaseService {
 
 
   private getAllDataFromDb() {
-    this.shiftObsarvable.subscribe(val => {
-      //clear all array when shift chnage and load from firebase again
-      this.shifts = [];
+
       this.reportsId = [];
       this.coldSpotId = [];
       this.hotSpotId = [];
-      // console.log(this.shiftsId);
+      // this.shiftsId = [];
 
-      val.forEach(item => {
+      this.shifts.forEach(item => {
         // console.log(item["$key"])
         if (this.checkIfShiftBelong(item["$key"])) {
 
-          this.shifts.push(item);
+          // this.shifts.push(item);
 
           // console.log(item)
           if (item.reportsId) {
@@ -160,7 +161,7 @@ export class FirebaseService {
 
 
       })
-    });
+    // });
 
     // console.log(this.shiftsId)
 
@@ -170,20 +171,19 @@ export class FirebaseService {
 
   }
   getHotSpot(id: String) {
+    if(!this.hotSpots || this.hotSpots.length == 0)
+      return null;
 
     for(let hot of this.hotSpots)
       if(hot['$key'] == id)
         return hot;
-    //  for(let i=0;  i < this.hotSpots.length; i++) {
-    //     if(id ==  this.hotSpots[i]["$key"]) {
-    //       console.log(this.hotSpots[i]);
-    //         return this.hotSpots[i];
-    //     }
-    //   }
+    
     return null;
   }
 
 getColdSpot(id: String) {
+  if(!this.coldSpots || this.coldSpots.length == 0)
+    return null;
   for(let cold of this.coldSpots)
       if(cold['$key'] == id)
         return cold;
@@ -192,6 +192,8 @@ getColdSpot(id: String) {
 }
 
 getReport(id: string){
+  if(!this.reports || this.reports.length == 0)
+    return null;
   for(let report of this.reports)
       if(report['$key'] == id)
         return report;
@@ -250,6 +252,7 @@ getReport(id: string){
       }
       if (val.length > 1)
         for (const shift of val[1]) {
+          console.log(shift);
           if (!this.searchInShiftId(shift))
             this.shiftsId.push(shift);
         }
@@ -267,6 +270,7 @@ getReport(id: string){
     firebase.database().ref("/users/" + firebase.auth().currentUser.uid).once("value").then(snapshot => {
 
       this.userService._user = snapshot.val();
+      console.log(snapshot.val());
       if (this.userService._user.shiftsId) {
         for (const id of this.userService._user.shiftsId) {
 
@@ -292,21 +296,6 @@ getReport(id: string){
       console.log(val);
       this.locations = val;
     });
-    // firebase.database().ref("/locations/").once("value", ids => {
-    //   for (let key in ids) {
-    //     if (!this.locationsId)
-    //       this.locationsId = [];
-    //     this.locationsId.push(key)
-    //   }
-    //   for (let id of this.locationsId) {
-    //     firebase.database().ref("/locations/" + id).once("value").then(loc => {
-    //       if (!this.locations)
-    //         this.locations = [];
-    //       this.locations.push(loc);
-    //     }).catch(error => { console.log(error.message) })
-    //   }
-    //   console.log(this.locations);
-    // })
   }
 
 
@@ -436,13 +425,12 @@ getReport(id: string){
   }
 
   getShift(id: string) {
-    return this.shiftObsarvable.map(val => {
-      for (const shift of val)
-        if (shift["key"] == id) {
-          return shift;
-        }
-    })
-
+    if(!this.shifts || this.shifts.length == 0)
+      return null;
+    for(let s of this.shifts)
+      if(s['$key'] == id)
+        return s;
+    return null;
   }
 
   public removeData(type: string, id: string) {