diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts
index a00ca57..eb91b13 100644
--- a/projects/project-3/frontend/src/app/app.module.ts
+++ b/projects/project-3/frontend/src/app/app.module.ts
@@ -24,13 +24,15 @@ import {MatNativeDateModule} from '@angular/material/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatTableModule} from '@angular/material/table';
+import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MapComponent,
     DashboardComponent,
-    PopUpComponent
+    PopUpComponent,
+    AutoRefreshComponent
   ],
   imports: [
     BrowserModule,
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index acb397a..43907e5 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -19,63 +19,54 @@
     <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
 
       <div class="input-container" fxFlex="35%" fxLayout="column">
-        <div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
-          <div class="container-info" fxFlex="55%">
-            <mat-card fxFlex="100%">
-              <mat-card-header>
-                <div class="example-header-image" mat-card-avatar></div>
-                <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
-              </mat-card-header>
-              <mat-card-content>
-                <div class="chart-bikepoint-availability">
-                  <div id="chart">
-                    <apx-chart
-                      [chart]="bikePointChartOptions.chart"
-                      [colors]="bikePointChartOptions.colors"
-                      [dataLabels]="bikePointChartOptions.dataLabels"
-                      [fill]="bikePointChartOptions.fill"
-                      [legend]="bikePointChartOptions.legend"
-                      [plotOptions]="bikePointChartOptions.plotOptions"
-                      [series]="bikePointChartOptions.series"
-                      [stroke]="bikePointChartOptions.stroke"
-                      [title]="bikePointChartOptions.title"
-                      [tooltip]="bikePointChartOptions.tooltip"
-                      [xaxis]="bikePointChartOptions.xaxis"
-                      [yaxis]="bikePointChartOptions.yaxis"
-                    ></apx-chart>
-                  </div>
-                </div>
-              </mat-card-content>
-            </mat-card>
-          </div>
-          <div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
-            <mat-card>
-              <mat-card-content>
-                <form [formGroup]="form">
-                  <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
-                    <mat-label>Enter a range</mat-label>
-                    <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
-                                          formGroupName="daterange">
-                      <input formControlName="start" matStartDate placeholder="Start date">
-                      <input formControlName="end" matEndDate placeholder="End date">
-                    </mat-date-range-input>
-                    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-                    <mat-date-range-picker #picker></mat-date-range-picker>
-                  </mat-form-field>
-                </form>
-                <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
-                  <button (click)="onSubmit()" color="primary" mat-raised-button>
-                    <mat-icon>dashboard</mat-icon>
-                    <span id="submit-date-span"> reload dashboard</span>
-                  </button>
-                </div>
-              </mat-card-content>
-            </mat-card>
-          </div>
-        </div>
+        <mat-card fxFlex fxLayout="column">
+          <mat-card-header fxFlex="15%">
+            <div class="example-header-image" mat-card-avatar></div>
+            <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
+          </mat-card-header>
+          <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
+            <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
+              <form [formGroup]="form">
+                <mat-form-field appearance="fill" class="datepicker">
+                  <mat-label>Enter a range</mat-label>
+                  <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
+                                        formGroupName="daterange">
+                    <input formControlName="start" matStartDate placeholder="Start date">
+                    <input formControlName="end" matEndDate placeholder="End date">
+                  </mat-date-range-input>
+                  <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                  <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+              </form>
+              <div class="submit-date">
+                <button (click)="onSubmit()" color="primary" mat-raised-button>
+                  <mat-icon>dashboard</mat-icon>
+                  <span id="submit-date-span"> reload</span>
+                </button>
+              </div>
+            </div>
+            <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
+              <div id="chart">
+                <apx-chart
+                  [chart]="bikePointChartOptions.chart"
+                  [colors]="bikePointChartOptions.colors"
+                  [dataLabels]="bikePointChartOptions.dataLabels"
+                  [fill]="bikePointChartOptions.fill"
+                  [legend]="bikePointChartOptions.legend"
+                  [plotOptions]="bikePointChartOptions.plotOptions"
+                  [series]="bikePointChartOptions.series"
+                  [stroke]="bikePointChartOptions.stroke"
+                  [title]="bikePointChartOptions.title"
+                  [tooltip]="bikePointChartOptions.tooltip"
+                  [xaxis]="bikePointChartOptions.xaxis"
+                  [yaxis]="bikePointChartOptions.yaxis"
+                ></apx-chart>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
       </div>
-
-      <mat-card class="mat-card-map" fxFlex fxLayout="row">
+      <mat-card class="mat-card-map" fxFlex>
         <div class="mini-map" fxFlex>
           <div class="map-frame" fxFill>
             <div fxFill id="minimap"></div>
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
index ee6593f..b0639ea 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
@@ -14,28 +14,14 @@ a {
   background: #086ed2;
 }
 
+.submit-date {
+  margin-bottom: 15px;
+}
+
 #chart {
   margin-right: 16px;
 }
 
-#submit-date-span {
-  padding: 10px;
-}
-
-.user-input {
-  height: 10em;
-}
-
-.datepicker {
-  margin-top: 2em;
-  margin-left: 1em;
-  margin-right: 1em
-}
-
-.submit-date {
-  padding-bottom: 2em;
-}
-
 .mat-card {
   padding: 1px 1px 1px;
   margin: 10px;
diff --git a/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.html b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.html
new file mode 100644
index 0000000..4f5dd3b
--- /dev/null
+++ b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.html
@@ -0,0 +1 @@
+<p>auto-refresh works!</p>
diff --git a/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.scss b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.spec.ts b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.spec.ts
new file mode 100644
index 0000000..16695ab
--- /dev/null
+++ b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AutoRefreshComponent } from './auto-refresh.component';
+
+describe('AutoRefreshComponent', () => {
+  let component: AutoRefreshComponent;
+  let fixture: ComponentFixture<AutoRefreshComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AutoRefreshComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AutoRefreshComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts
new file mode 100644
index 0000000..8ea2a6c
--- /dev/null
+++ b/projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-auto-refresh',
+  templateUrl: './auto-refresh.component.html',
+  styleUrls: ['./auto-refresh.component.scss']
+})
+export class AutoRefreshComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}