diff --git a/src/app/projects/project-card/project-card.component.html b/src/app/projects/project-card/project-card.component.html
index 6cc1921..b257702 100644
--- a/src/app/projects/project-card/project-card.component.html
+++ b/src/app/projects/project-card/project-card.component.html
@@ -1,4 +1,3 @@
 <a routerLink="{{project.slug}}">
-    <h2>{{project.title}}</h2>
-    <p>{{project.description}}</p>
+    {{project.title + " - " + project.date}}
 </a>
\ No newline at end of file
diff --git a/src/app/projects/project-card/project-card.component.scss b/src/app/projects/project-card/project-card.component.scss
index d902910..11d9562 100644
--- a/src/app/projects/project-card/project-card.component.scss
+++ b/src/app/projects/project-card/project-card.component.scss
@@ -11,7 +11,7 @@
         border: colors.$inklets-color-highlight-bg 2px dashed;
         background-color: colors.$inklets-color-fg;
         text-decoration: none;
-        padding: 0 20px 0 20px;
+        padding: 5px 20px 5px 20px;
     }
 
     a:hover {
diff --git a/src/app/projects/project/project.component.html b/src/app/projects/project/project.component.html
index dc66179..c6545ee 100644
--- a/src/app/projects/project/project.component.html
+++ b/src/app/projects/project/project.component.html
@@ -1,2 +1 @@
-<p>project works!</p>
-{{project.title}}
+<span [innerHTML]="project.content"></span>
diff --git a/src/app/projects/project/project.component.scss b/src/app/projects/project/project.component.scss
index e69de29..7bfa459 100644
--- a/src/app/projects/project/project.component.scss
+++ b/src/app/projects/project/project.component.scss
@@ -0,0 +1,10 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0 20px 0 20px;
+    margin: 0 140px 10px 140px;
+}
\ No newline at end of file
diff --git a/src/app/projects/project/project.component.ts b/src/app/projects/project/project.component.ts
index ce93a3e..9325d51 100644
--- a/src/app/projects/project/project.component.ts
+++ b/src/app/projects/project/project.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -8,17 +8,18 @@ import { ProjectsService } from '../projects.service';
 @Component({
   selector: 'app-project',
   templateUrl: './project.component.html',
+  // encapsulation: ViewEncapsulation.None,
   styleUrls: ['./project.component.scss']
 })
 export class ProjectComponent implements OnInit, OnDestroy {
   _unsubscribe$: Subject<boolean> = new Subject();
 
   project: Project = {
-    title: '',
-    description: '',
     slug: '',
-    ct: '',
-    body: '',
+    title: '',
+    date: '',
+    category: '',
+    content: '',
   };
 
   constructor(
diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts
index 17af914..6da1e8b 100644
--- a/src/app/projects/projects.component.ts
+++ b/src/app/projects/projects.component.ts
@@ -26,7 +26,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
         .subscribe((result: Project[]) => {
             this.uncategorizedProjects = result;
         });
-    this.projectsService.getInvoicesToApprove();
+    this.projectsService.getProjects();
   }
 
   ngOnDestroy(): void {
diff --git a/src/app/projects/projects.service.ts b/src/app/projects/projects.service.ts
index c77cffc..fc374fb 100644
--- a/src/app/projects/projects.service.ts
+++ b/src/app/projects/projects.service.ts
@@ -43,7 +43,7 @@ export class ProjectsService {
    * I am actively avoiding any kind of environment management, this is a very basic site and currently this is the only api call.
    */
 
-  private PROJECT_API_URL = "https://cms.inkletblot.com/"
+  private PROJECT_API_URL = "https://cms.inkletblot.com"
 
   constructor(private http: HttpClient, private router: Router) { }
 
@@ -53,9 +53,9 @@ export class ProjectsService {
       })
   };
 
-  getInvoicesToApprove(): void {
+  getProjects(): void {
     this.http
-        .get(`${this.PROJECT_API_URL}`, this.httpOptions)
+        .get(`${this.PROJECT_API_URL}/posts`, this.httpOptions)
         .subscribe(
             (response: Project[]) => {
                 if (response) {
@@ -71,6 +71,25 @@ export class ProjectsService {
         );
     }
 
+    getSingleProject(id: string): void {
+      this.http
+          .get(`${this.PROJECT_API_URL}/post/${id}`, this.httpOptions)
+          .subscribe(
+              (response: Project) => {
+                  if (response) {
+                      // using text/plain so as to not get the preflight options request
+                      // as such : Project[] does not work as expected and objects must be parsed.
+                      this.currentProject = response;
+                      // filter out different categories here currently only one
+                  }
+              },
+              (error) => {
+                  this.apiErrored = true;
+                  this.router.navigate(['not-found'])
+              }
+          );
+      }
+
     /**
      * This is not very efficient code but I'm not planning on having that many projects and (if this turns into a blog) blog posts
      * If this does become a general blog, then I will make this a bit more efficient.
@@ -85,7 +104,7 @@ export class ProjectsService {
             }
         })
         if (!found) {
-            this.router.navigate(['not-found'])
+            this.getSingleProject(id)
         }
     }
 }
diff --git a/src/app/shared/models/project.model.ts b/src/app/shared/models/project.model.ts
index 196064d..522b454 100644
--- a/src/app/shared/models/project.model.ts
+++ b/src/app/shared/models/project.model.ts
@@ -1,5 +1,6 @@
 export interface Project {
     slug: string,
+    title: string,
     date: string,
     category: string,
     content: string
diff --git a/src/styles.scss b/src/styles.scss
index 9e71b2c..e5950b8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -10,4 +10,94 @@ body {
     font-family: Roboto, 'Helvetica Neue', sans-serif;
     background-color: colors.$inklets-color-black;
     color: colors.$inklets-color-white;
+}
+
+/*
+
+    Codehilite styles for api content
+
+*/
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.codehilite .hll { background-color: #ffffcc }
+.codehilite { background: #000000; padding: 5px; }
+.codehilite .c { color: #408080; font-style: italic } /* Comment */
+.codehilite .err { border: 1px solid #FF0000 } /* Error */
+.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
+.codehilite .o { color: #666666 } /* Operator */
+.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
+.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
+.codehilite .gd { color: #A00000 } /* Generic.Deleted */
+.codehilite .ge { font-style: italic } /* Generic.Emph */
+.codehilite .gr { color: #FF0000 } /* Generic.Error */
+.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #00A000 } /* Generic.Inserted */
+.codehilite .go { color: #888888 } /* Generic.Output */
+.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.codehilite .gs { font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #0044DD } /* Generic.Traceback */
+.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
+.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #B00040 } /* Keyword.Type */
+.codehilite .m { color: #666666 } /* Literal.Number */
+.codehilite .s { color: #BA2121 } /* Literal.String */
+.codehilite .na { color: #7D9029 } /* Name.Attribute */
+.codehilite .nb { color: #008000 } /* Name.Builtin */
+.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.codehilite .no { color: #880000 } /* Name.Constant */
+.codehilite .nd { color: #AA22FF } /* Name.Decorator */
+.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.codehilite .nf { color: #0000FF } /* Name.Function */
+.codehilite .nl { color: #A0A000 } /* Name.Label */
+.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #19177C } /* Name.Variable */
+.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
+.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
+.codehilite .mf { color: #666666 } /* Literal.Number.Float */
+.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
+.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
+.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
+.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
+.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
+.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
+.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
+.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.codehilite .sx { color: #008000 } /* Literal.String.Other */
+.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
+.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
+.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
+.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
+.codehilite .vc { color: #19177C } /* Name.Variable.Class */
+.codehilite .vg { color: #19177C } /* Name.Variable.Global */
+.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
+.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
+.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
+
+
+* a {
+    text-decoration: none;
+    color: colors.$inklets-color-fg;
+}
+
+* a:hover {
+    color: colors.$inklets-color-highlight-fg;
 }
\ No newline at end of file