diff --git a/.angular-cli.json b/.angular-cli.json
index 61be52b..6eb2cf8 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -21,12 +21,12 @@
       "styles": [
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
+        "../node_modules/popper.js/dist/popper.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {
diff --git a/package-lock.json b/package-lock.json
index b4bb7a8..152f5db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -802,9 +802,9 @@
       }
     },
     "bootstrap": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+      "version": "4.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
+      "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
     },
     "brace-expansion": {
       "version": "1.1.8",
@@ -5618,6 +5618,11 @@
         "pinkie": "2.0.4"
       }
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
diff --git a/package.json b/package.json
index 0d7c7b6..e1b902c 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,11 @@
     "@angular/platform-browser": "^4.4.6",
     "@angular/platform-browser-dynamic": "^4.4.6",
     "@angular/router": "^4.4.6",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.0.0-beta.2",
     "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
+    "popper.js": "^1.12.9",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b85c313..b65c47c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,13 +4,16 @@ import { RouterModule, Routes }  from '@angular/router';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
 import { PostsComponent } from './components/posts/posts.component';
+import { CvComponent } from './components/cv/cv.component';
  
 const appRoutes: Routes = [
 //   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'home', component: HomeComponent },
   { path: 'posts', component: PostsComponent },
+  { path: 'cv', component: CvComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
-  { path: '**', component: AppComponent }
+  { path: '*',   redirectTo: '/home', pathMatch: 'full' },
+  // { path: '**', component: AppComponent }
 ];
  
 @NgModule({
diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..4f9dd8a 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,5 @@
+.centercontents {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index af196b5..ddc46a6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,11 +3,13 @@
 
   <!--the top menu... should be always visible, everywhere-->
   <div class="row">
-    <div class="col-md-12">
-      <div id="topmenu" class="text-center">
-        <!--each item is an icon-->
+    <div class="col-md-12 centercontents" id="topmenubuttons">
+      <div class="btn-group mx-auto" role="group" aria-label="Basic example">
+        <!-- <button type="button" class="btn btn-secondary">Left</button> -->
+        <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
+        <!-- <button type="button" class="btn btn-secondary">Right</button> -->
         <a routerLink="/home"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
-        <a routerLink="/posts"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/posts"><i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i></a>
         <a routerLink="/cv"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
       </div>
     </div>
@@ -15,6 +17,10 @@
   </div>
 
   <!--this shows the current route's content-->
-  <router-outlet></router-outlet> 
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 
 </div>
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f5b9068..80612d4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,13 +8,15 @@ import { PostsComponent } from './components/posts/posts.component';
 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';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     PostsComponent,
-    PostComponent
+    PostComponent,
+    CvComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/cv/cv.component.css b/src/app/components/cv/cv.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/cv/cv.component.html b/src/app/components/cv/cv.component.html
new file mode 100644
index 0000000..f426b7d
--- /dev/null
+++ b/src/app/components/cv/cv.component.html
@@ -0,0 +1,3 @@
+<p>
+  cv works!
+</p>
diff --git a/src/app/components/cv/cv.component.spec.ts b/src/app/components/cv/cv.component.spec.ts
new file mode 100644
index 0000000..5f1287f
--- /dev/null
+++ b/src/app/components/cv/cv.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CvComponent } from './cv.component';
+
+describe('CvComponent', () => {
+  let component: CvComponent;
+  let fixture: ComponentFixture<CvComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CvComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CvComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/cv/cv.component.ts b/src/app/components/cv/cv.component.ts
new file mode 100644
index 0000000..24cf335
--- /dev/null
+++ b/src/app/components/cv/cv.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cv',
+  templateUrl: './cv.component.html',
+  styleUrls: ['./cv.component.css']
+})
+export class CvComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index dc0619b..75d51cd 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,7 +1,7 @@
-<p>
-  post works!
-</p>
-<div>
-  {{post.filename}}
-</div>
-<div #htmlcontainer></div>
\ No newline at end of file
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">Placeholder title</h5>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <div class="card-text" #htmlcontainer></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 01dfa7b..34e5ad5 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -11,7 +11,6 @@ export class PostComponent implements OnInit {
 
   @Input() post:Post;
   @ViewChild('htmlcontainer') htmlContainer: ElementRef;
-  
 
   constructor(private dataloaderService:DataloaderService) { }
 
@@ -23,5 +22,4 @@ export class PostComponent implements OnInit {
       this.htmlContainer.nativeElement.innerHTML = content;
     });
   }
-
 }
diff --git a/src/app/components/posts/posts.component.html b/src/app/components/posts/posts.component.html
index d098a89..26fa7ba 100644
--- a/src/app/components/posts/posts.component.html
+++ b/src/app/components/posts/posts.component.html
@@ -1,9 +1,11 @@
-<p>
-  These are all the posts... put some filter buttons here or something?
-</p>
+<div class="card text-center">
+  <div class="card-body">
+    <p class="card-text">All the previously made posts are shown below.</p>
+  </div>
+</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>
-
+  <app-post *ngFor='let post of posts | async' [post]="post"></app-post>
+</div>
\ No newline at end of file
diff --git a/src/app/services/dataloader.service.ts b/src/app/services/dataloader.service.ts
index 34f8305..cb4d173 100644
--- a/src/app/services/dataloader.service.ts
+++ b/src/app/services/dataloader.service.ts
@@ -31,7 +31,7 @@ export class DataloaderService {
     };
 
     console.log('launching GET');
-    return this.http.get("assets/post/"+type+"/"+id+".html", {responseType: 'text'});
+    return this.http.get("assets/post/"+type+"/"+id+"/"+id+".html", {responseType: 'text'});
   }
 
 }
diff --git a/src/assets/post/project/test/info.json b/src/assets/post/project/test/info.json
new file mode 100644
index 0000000..13e2fec
--- /dev/null
+++ b/src/assets/post/project/test/info.json
@@ -0,0 +1,3 @@
+{
+    "title": "Test title"
+}
\ No newline at end of file
diff --git a/src/assets/post/project/test.html b/src/assets/post/project/test/test.html
similarity index 56%
rename from src/assets/post/project/test.html
rename to src/assets/post/project/test/test.html
index 631c496..196624d 100644
--- a/src/assets/post/project/test.html
+++ b/src/assets/post/project/test/test.html
@@ -1,3 +1,3 @@
 <p>This is a project post</p>
 <p>Typically, all these project posts will have a number of paragraphs.</p>
-<p>Even images: <img src="assets/images/baby-duck.jpg"></img></p>
\ No newline at end of file
+<img src="assets/images/baby-duck.jpg" class="img-fluid" alt="Responsive image">
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 8d8a782..e50a47e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,10 +1 @@
-/* You can add global styles to this file, and also import other style files */
-
-
-/*top menu*/
-#topmenu {
-    border-bottom: 1px solid gray;
-    margin-bottom: 15px;
-    padding-bottom: 8px;
-    padding-top: 8px;
-}
\ No newline at end of file
+/* You can add global styles to this file, and also import other style files */
\ No newline at end of file