diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 80612d4..bd105b4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,8 @@ import { PostComponent } from './components/post/post.component';
 import { DataloaderService } from 'app/services/dataloader.service';
 import { HttpClientModule } from '@angular/common/http';
 import { CvComponent } from './components/cv/cv.component';
+import { PostpipePipe } from './pipes/postpipe.pipe';
+import { PosttypepipePipe } from './pipes/posttypepipe.pipe';
 
 @NgModule({
   declarations: [
@@ -16,7 +18,9 @@ import { CvComponent } from './components/cv/cv.component';
     HomeComponent,
     PostsComponent,
     PostComponent,
-    CvComponent
+    CvComponent,
+    PostpipePipe,
+    PosttypepipePipe
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/posts/posts.component.html b/src/app/components/posts/posts.component.html
index 63c2a60..b213059 100644
--- a/src/app/components/posts/posts.component.html
+++ b/src/app/components/posts/posts.component.html
@@ -1,9 +1,13 @@
-<div class="alert alert-secondary" role="alert">
+<!-- <div class="alert alert-secondary" role="alert">
   All the previously made posts are shown below.
 </div>
+ -->
 
+<div class="btn-group" role="group" aria-label="Categories">
+  <button type="button" class="btn btn-secondary">All</button>
+  <button *ngFor='let postType of postTypes | async' type="button" class="btn btn-secondary">{{postType}}</button>
+</div>
 
-<!-- <div *ngFor='let post of posts | async'> {{post.filename}} </div> -->
 <div>
   <app-post *ngFor='let post of posts | async' [post]="post"></app-post>
 </div>
\ No newline at end of file
diff --git a/src/app/components/posts/posts.component.ts b/src/app/components/posts/posts.component.ts
index 2e311e0..d30d79c 100644
--- a/src/app/components/posts/posts.component.ts
+++ b/src/app/components/posts/posts.component.ts
@@ -3,6 +3,12 @@ import { DataloaderService } from 'app/services/dataloader.service';
 import { Post } from '../../model/post';
 import { Observable } from 'rxjs/Observable';
 
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/merge';
+import 'rxjs/add/operator/concatMap';
+import 'rxjs/add/observable/from';
+import 'rxjs/add/operator/distinct';
+
 @Component({
   selector: 'app-posts',
   templateUrl: './posts.component.html',
@@ -10,6 +16,7 @@ import { Observable } from 'rxjs/Observable';
 })
 export class PostsComponent implements OnInit {
 
+  postTypes: Observable<String[]>;
   posts:Observable<Post[]>;
 
   constructor(private dataloaderService:DataloaderService) { }
@@ -17,6 +24,25 @@ export class PostsComponent implements OnInit {
   ngOnInit() {
     //fetch the posts
     this.posts = this.dataloaderService.getPosts();
+    this.postTypes = this.getPostTypes();
+    this.postTypes.subscribe(test=>{
+      console.log('result of subscribe: '+test);
+    });
   }
 
+  getPostTypes():Observable<String[]> {
+    return this.posts.map(posts=>{
+      let result = new Set<String>();
+      for(let post of posts) {
+        result.add(post.type);
+      }
+      console.log('got these post types!');
+      console.log(result);
+      return Array.from(result);
+    });
+  }
+
+  filterOnType(type:String): void {
+    
+  }
 }
diff --git a/src/app/pipes/posttypepipe.pipe.spec.ts b/src/app/pipes/posttypepipe.pipe.spec.ts
new file mode 100644
index 0000000..2a49235
--- /dev/null
+++ b/src/app/pipes/posttypepipe.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { PosttypepipePipe } from './posttypepipe.pipe';
+
+describe('PosttypepipePipe', () => {
+  it('create an instance', () => {
+    const pipe = new PosttypepipePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/pipes/posttypepipe.pipe.ts b/src/app/pipes/posttypepipe.pipe.ts
new file mode 100644
index 0000000..6c3ce84
--- /dev/null
+++ b/src/app/pipes/posttypepipe.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Post } from 'app/model/post';
+
+@Pipe({
+  name: 'posttypepipe'
+})
+export class PosttypepipePipe implements PipeTransform {
+
+  transform(posts: Post[], args?: any): any {
+    return posts.filter(post=>post.type == args);
+  }
+
+}
diff --git a/src/assets/post/blog/first/full.html b/src/assets/post/blog/first/full.html
index c71a3c6..3ecd77c 100644
--- a/src/assets/post/blog/first/full.html
+++ b/src/assets/post/blog/first/full.html
@@ -1,3 +1,3 @@
 <p>It's been on my mind for a while now to create an oldschool homepage. So, here it is. An homage to the old and tried Web 1.0, whoever thought static webpages were done and dusted is <em>wrong</em>! This will be a collection of some technical things I want to remind myself about so I don't have to look them up again and again, miscellaneous pictures of projects (in-progress or done) or anything that comes to mind I'd like to share on something other than the usual social media suspects.</p>
 
-<p>Besides, it's nice to have an Angular2/Bootstrap playground to test some stuff out. I'll probably update this thing once in a while. Maybe even use a database, wouldn't that be something...</p>
\ No newline at end of file
+<p>Besides, it's nice to have a minimalistic Angular2/Bootstrap playground to test some stuff out. I'll probably update this thing once in a while. Maybe even use a database, wouldn't that be something...</p>
\ No newline at end of file