diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b2933ba..b85c313 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,12 +3,12 @@ import { RouterModule, Routes }  from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
-import { ProjectsComponent } from './components/projects/projects.component';
+import { PostsComponent } from './components/posts/posts.component';
  
 const appRoutes: Routes = [
 //   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'home', component: HomeComponent },
-  { path: 'projects', component: ProjectsComponent },
+  { path: 'posts', component: PostsComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
   { path: '**', component: AppComponent }
 ];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a54fe27..af196b5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,7 +7,7 @@
       <div id="topmenu" class="text-center">
         <!--each item is an icon-->
         <a routerLink="/home"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
-        <a routerLink="/projects"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/posts"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
         <a routerLink="/cv"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
       </div>
     </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d23ef31..35a2104 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,17 +5,14 @@ import { AppComponent } from './app.component';
 
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
-import { ProjectsComponent } from './components/projects/projects.component';
-import { ProjectComponent } from './components/project/project.component';
 import { PostsComponent } from './components/posts/posts.component';
 import { PostComponent } from './components/post/post.component';
+import { DataloaderService } from 'app/services/dataloader.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    ProjectsComponent,
-    ProjectComponent,
     PostsComponent,
     PostComponent
   ],
@@ -23,7 +20,7 @@ import { PostComponent } from './components/post/post.component';
     BrowserModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [DataloaderService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/components/posts/posts.component.html b/src/app/components/posts/posts.component.html
index a74cdc9..9acd8b9 100644
--- a/src/app/components/posts/posts.component.html
+++ b/src/app/components/posts/posts.component.html
@@ -1,3 +1,6 @@
 <p>
   posts works!
 </p>
+
+<div *ngFor='let post of posts | async'> {{post.filename}} </div>
+
diff --git a/src/app/components/posts/posts.component.ts b/src/app/components/posts/posts.component.ts
index 3264a90..2e311e0 100644
--- a/src/app/components/posts/posts.component.ts
+++ b/src/app/components/posts/posts.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { DataloaderService } from 'app/services/dataloader.service';
+import { Post } from '../../model/post';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-posts',
@@ -7,9 +10,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PostsComponent implements OnInit {
 
-  constructor() { }
+  posts:Observable<Post[]>;
+
+  constructor(private dataloaderService:DataloaderService) { }
 
   ngOnInit() {
+    //fetch the posts
+    this.posts = this.dataloaderService.getPosts();
   }
 
 }
diff --git a/src/app/model/post.ts b/src/app/model/post.ts
new file mode 100644
index 0000000..41200c6
--- /dev/null
+++ b/src/app/model/post.ts
@@ -0,0 +1,9 @@
+export class Post {
+    filename:String;
+    date:Date;
+
+    constructor(filename:String) {
+        this.date = new Date();
+        this.filename = filename;
+    }
+}
diff --git a/src/app/services/dataloader.service.spec.ts b/src/app/services/dataloader.service.spec.ts
new file mode 100644
index 0000000..a82b2ad
--- /dev/null
+++ b/src/app/services/dataloader.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DataloaderService } from './dataloader.service';
+
+describe('DataloaderService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataloaderService]
+    });
+  });
+
+  it('should be created', inject([DataloaderService], (service: DataloaderService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/services/dataloader.service.ts b/src/app/services/dataloader.service.ts
new file mode 100644
index 0000000..3067741
--- /dev/null
+++ b/src/app/services/dataloader.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Post } from '../model/post';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+@Injectable()
+export class DataloaderService {
+
+  constructor() { }
+
+  getPosts(): Observable<Post[]> {
+    console.log('dataloadersdervice.getPosts called');
+    return of([new Post('placeholderservice')]);
+  }
+
+}
diff --git a/src/assets/posts/projects/1.html b/src/assets/posts/projects/test.html
similarity index 100%
rename from src/assets/posts/projects/1.html
rename to src/assets/posts/projects/test.html