diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.html
new file mode 100644
index 00000000..e81d01ac
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.html
@@ -0,0 +1,57 @@
+<div class="skill-detail-body" fxLayout="row wrap">
+
+    <!-- Left Side -->
+    <div class="skill-detail-body-left" fxFlex>
+        <div class="skill-detail-section">
+            <div class="mat-subheading-1">hey mycroft</div>
+            <div fxLayout="row wrap">
+                <div class="mat-body-1 skill-trigger" *ngFor="let trigger of skill.triggers">
+                    <fa-icon [icon]="triggerIcon"></fa-icon>
+                    {{trigger}}
+                </div>
+            </div>
+        </div>
+        <div class="skill-detail-section">
+            <div class="mat-subheading-1">description</div>
+            <div class="mat-body-1" [innerHTML]="skill.description"></div>
+        </div>
+        <div class="skill-detail-section">
+            <div class="mat-subheading-1">credits</div>
+            <div class="mat-body-1" *ngFor="let credit of skill.credits">
+                {{credit.name}}
+            </div>
+        </div>
+    </div>
+
+    <!-- Right Side -->
+    <div class="skill-detail-body-right" fxFlex="20">
+        <div class="skill-detail-section">
+            <div class="mat-subheading-1">supported devices</div>
+            <div class="mat-body-1" fxLayoutAlign="none center">
+                <img src="../../../../assets/mark-1-icon.svg">
+                Mark I
+            </div>
+            <div class="mat-body-1" fxLayoutAlign="none center">
+                <img src="../../../../assets/mark-2-icon.svg">
+                Mark II
+            </div>
+            <div class="mat-body-1" fxLayoutAlign="none center">
+                <img src="../../../../assets/picroft-icon.svg">
+                Picroft
+            </div>
+            <div class="mat-body-1" fxLayoutAlign="none center">
+                <img src="../../../../assets/kde.svg" class="kde-icon">
+                KDE
+            </div>
+        </div>
+        <div  class="skill-detail-section">
+            <div class="mat-subheading-1">supported languages</div>
+            <div class="mat-body-1">English</div>
+        </div>
+        <div class="skill-detail-section">
+            <div class="mat-subheading-1">category</div>
+            <div class="mat-body-1">{{skill.categories[0]}}</div>
+        </div>
+    </div>
+
+</div>
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
new file mode 100644
index 00000000..580b1fae
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
@@ -0,0 +1,46 @@
+@import '../../../../stylesheets/global';
+
+.skill-detail-body {
+    background-color: $mycroft-white;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    margin-bottom: 50px;
+    padding-bottom: 3vh;
+    padding-left: 4vw;
+    padding-right: 4vw;
+    padding-top: 3vh;
+    .mat-subheading-1 {
+        color: $mycroft-dark-grey;
+        font-variant: small-caps;
+        font-weight: 500;
+        margin-bottom: 5px;
+    }
+    .mat-body-1 {
+        color: $mycroft-secondary;
+    }
+    .kde-icon {
+        height: 40px;
+        width: 40px;
+    }
+    .skill-detail-section {
+        margin-bottom: 30px;
+    }
+    .skill-detail-body-left {
+        min-width: 340px;
+        margin-right: 50px;
+        .skill-trigger {
+            @include skill-trigger;
+            @include ellipsis-overflow;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            max-width: 340px;
+        }
+    }
+    .skill-detail-body-right {
+        margin-right: 20px;
+        white-space: nowrap;
+        img {
+            padding-right: 10px;
+        }
+    }
+}
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.ts
new file mode 100644
index 00000000..a801a6e2
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+import { SkillDetail } from "../../skills.service";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+  selector: 'market-skill-detail-body',
+  templateUrl: './skill-detail-body.component.html',
+  styleUrls: ['./skill-detail-body.component.scss']
+})
+export class SkillDetailBodyComponent {
+    @Input() public skill: SkillDetail;
+    public triggerIcon = faComment;
+
+    constructor() { }
+
+}
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
new file mode 100644
index 00000000..525edf01
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
@@ -0,0 +1,37 @@
+    <!-- Header block -->
+    <div class="skill-detail-header" fxLayout="row wrap">
+
+        <!-- Left Side -->
+        <div class="skill-detail-header-left" fxFlex>
+            <!-- there cannot be an icon and an icon_image.  show the
+                 image if it exists otherwise show the icon -->
+            <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
+            <fa
+                *ngIf="!skill.iconImage"
+                [ngStyle]="{'color': skill.icon.color}"
+                name={{skill.icon.icon}}
+            >
+            </fa>
+            <div fxFlex>
+                <h1>{{skill.title}}</h1>
+                <div class="mat-body-1" [innerHTML]="skill.summary"></div>
+            </div>
+        </div>
+
+        <!-- Right Side -->
+        <div class="skill-detail-header-right" fxFlex="20">
+            <skill-install-button [skill]="skill" [component]="'skillDetail'">
+            </skill-install-button>
+            <div>
+                <button
+                    mat-icon-button
+                    class="github-button"
+                    (click)="navigateToGithubRepo(skill.repositoryUrl)"
+                >
+                    <fa-icon [icon]="githubIcon"></fa-icon>
+                    GitHub Repository
+                </button>
+            </div>
+        </div>
+
+    </div>
\ No newline at end of file
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
new file mode 100644
index 00000000..f8d7e911
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
@@ -0,0 +1,48 @@
+@import '../../../../stylesheets/global';
+
+.skill-detail-header {
+    background-color: #f7f9fa;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    padding-bottom: 3vh;
+    padding-left: 4vw;
+    padding-right: 4vw;
+    padding-top: 4vh;
+    .skill-detail-header-left {
+        color: $mycroft-secondary;
+        margin-right: 50px;
+        min-width: 340px;
+        fa {
+            font-size: 70px;
+            margin-right: 20px;
+        }
+        img {
+            margin-right: 20px;
+        }
+        h1 {
+            font-family: 'Roboto Mono', monospace;
+            margin-bottom: 10px;
+            margin-top: 0;
+        }
+    }
+    .skill-detail-header-right {
+        margin-right: 20px;
+        .install-button {
+            @include action-button;
+            width: 140px;
+        }
+        .install-button:hover {
+            background-color: $mycroft-tertiary-green;
+            color: $mycroft-secondary;
+        }
+
+        .github-button {
+            color: $mycroft-dark-grey;
+            font-weight: normal;
+            width: 135px;
+            fa-icon {
+                padding-right: 5px;
+            }
+        }
+    }
+}
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.ts
new file mode 100644
index 00000000..c9426879
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { SkillDetail } from "../../skills.service";
+import { faCodeBranch } from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+    selector: 'market-skill-detail-header',
+    templateUrl: './skill-detail-header.component.html',
+    styleUrls: ['./skill-detail-header.component.scss']
+})
+export class SkillDetailHeaderComponent {
+    public githubIcon = faCodeBranch;
+    @Input() public skill: SkillDetail;
+
+  constructor() { }
+}
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.html
index ab558cf9..4d25d7ac 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.html
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.html
@@ -5,102 +5,6 @@
     </button>
 </div>
 <div class="skill-detail" *ngIf="skill$ | async as skill">
-    <!-- Header block -->
-    <div class="skill-detail-header" fxLayout="row wrap">
-
-        <!-- Left Side -->
-        <div class="skill-detail-header-left" fxFlex>
-            <!-- there cannot be an icon and an icon_image.  show the
-                 image if it exists otherwise show the icon -->
-            <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
-            <fa
-                *ngIf="!skill.iconImage"
-                [ngStyle]="{'color': skill.icon.color}"
-                name={{skill.icon.icon}}
-            >
-            </fa>
-            <div fxFlex>
-                <h1>{{skill.title}}</h1>
-                <div class="mat-body-1" [innerHTML]="skill.summary"></div>
-            </div>
-        </div>
-
-        <!-- Right Side -->
-        <div class="skill-detail-header-right" fxFlex="20">
-            <div class="install-button">
-                <button mat-flat-button class="install-button">INSTALL</button>
-            </div>
-            <div>
-                <button
-                    mat-icon-button
-                    class="github-button"
-                    (click)="navigateToGithubRepo(skill.repositoryUrl)"
-                >
-                    <fa-icon [icon]="githubIcon"></fa-icon>
-                    GitHub Repository
-                </button>
-            </div>
-        </div>
-
-    </div>
-
-    <!-- Detail block -->
-    <div class="skill-detail-body" fxLayout="row wrap">
-
-        <!-- Left Side -->
-        <div class="skill-detail-body-left" fxFlex>
-            <div class="skill-detail-section">
-                <div class="mat-subheading-1">hey mycroft</div>
-                <div fxLayout="row wrap">
-                    <div class="mat-body-1 skill-trigger" *ngFor="let trigger of skill.triggers">
-                        <fa-icon [icon]="triggerIcon"></fa-icon>
-                        {{trigger}}
-                    </div>
-                </div>
-            </div>
-            <div class="skill-detail-section">
-                <div class="mat-subheading-1">description</div>
-                <div class="mat-body-1" [innerHTML]="skill.description"></div>
-            </div>
-            <div class="skill-detail-section">
-                <div class="mat-subheading-1">credits</div>
-                <div class="mat-body-1" *ngFor="let credit of skill.credits">
-                    {{credit.name}}
-                </div>
-            </div>
-        </div>
-
-        <!-- Right Side -->
-        <div class="skill-detail-body-right" fxFlex="20">
-            <div class="skill-detail-section">
-                <div class="mat-subheading-1">supported devices</div>
-                <div class="mat-body-1" fxLayoutAlign="none center">
-                    <img src="../../../assets/mark-1-icon.svg">
-                    Mark I
-                </div>
-                <div class="mat-body-1" fxLayoutAlign="none center">
-                    <img src="../../../assets/mark-2-icon.svg">
-                    Mark II
-                </div>
-                <div class="mat-body-1" fxLayoutAlign="none center">
-                    <img src="../../../assets/picroft-icon.svg">
-                    Picroft
-                </div>
-                <div class="mat-body-1" fxLayoutAlign="none center">
-                    <img src="../../../assets/kde.svg" class="kde-icon">
-                    KDE
-                </div>
-            </div>
-            <div  class="skill-detail-section">
-                <div class="mat-subheading-1">supported languages</div>
-                <div class="mat-body-1">English</div>
-            </div>
-            <div class="skill-detail-section">
-                <div class="mat-subheading-1">category</div>
-                <div class="mat-body-1">{{skill.categories[0]}}</div>
-            </div>
-        </div>
-
-    </div>
-
+    <market-skill-detail-header [skill]="skill"></market-skill-detail-header>
+    <market-skill-detail-body [skill]="skill"></market-skill-detail-body>
 </div>
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.scss
index 3c37d3e7..fc14cc74 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.scss
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.scss
@@ -15,94 +15,4 @@
     @include skill-detail-size;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     border-radius: 10px;
-    .skill-detail-header {
-        background-color: #f7f9fa;
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-        padding-bottom: 3vh;
-        padding-left: 4vw;
-        padding-right: 4vw;
-        padding-top: 4vh;
-        .skill-detail-header-left {
-            color: $mycroft-secondary;
-            margin-right: 50px;
-            min-width: 340px;
-            fa {
-                font-size: 70px;
-                margin-right: 20px;
-            }
-            img {
-                margin-right: 20px;
-            }
-            h1 {
-                font-family: 'Roboto Mono', monospace;
-                margin-bottom: 10px;
-                margin-top: 0;
-            }
-        }
-        .skill-detail-header-right {
-            margin-right: 20px;
-            .install-button {
-                @include action-button;
-                width: 140px;
-            }
-            .install-button:hover {
-                background-color: $mycroft-tertiary-green;
-                color: $mycroft-secondary;
-            }
-
-            .github-button {
-                color: $mycroft-dark-grey;
-                font-weight: normal;
-                width: 135px;
-                fa-icon {
-                    padding-right: 5px;
-                }
-            }
-        }
-    }
-    .skill-detail-body {
-        background-color: $mycroft-white;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        margin-bottom: 50px;
-        padding-bottom: 3vh;
-        padding-left: 4vw;
-        padding-right: 4vw;
-        padding-top: 3vh;
-        .mat-subheading-1 {
-            color: $mycroft-dark-grey;
-            font-variant: small-caps;
-            font-weight: 500;
-            margin-bottom: 5px;
-        }
-        .mat-body-1 {
-            color: $mycroft-secondary;
-        }
-        .kde-icon {
-            height: 40px;
-            width: 40px;
-        }
-        .skill-detail-section {
-            margin-bottom: 30px;
-        }
-        .skill-detail-body-left {
-            min-width: 340px;
-            margin-right: 50px;
-            .skill-trigger {
-                @include skill-trigger;
-                @include ellipsis-overflow;
-                margin-right: 10px;
-                margin-bottom: 10px;
-                max-width: 340px;
-            }
-        }
-        .skill-detail-body-right {
-            margin-right: 20px;
-            white-space: nowrap;
-            img {
-                padding-right: 10px;
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.spec.ts b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.spec.ts
deleted file mode 100644
index 84f74fee..00000000
--- a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SkillDetailComponent } from './skill-detail.component';
-
-describe('SkillDetailComponent', () => {
-  let component: SkillDetailComponent;
-  let fixture: ComponentFixture<SkillDetailComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SkillDetailComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SkillDetailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.ts
index 2c8bef96..3f700fb8 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.ts
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-detail/skill-detail.component.ts
@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from "rxjs/internal/Observable";
-import { switchMap } from "rxjs/operators";
+import { switchMap, tap } from "rxjs/operators";
 
-import { faArrowLeft, faComment, faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 
-import { Skill, SkillsService } from "../skills.service";
+import { InstallService } from "../install.service";
+import { SkillDetail, SkillsService } from "../skills.service";
 
 @Component({
   selector: 'marketplace-skill-detail',
@@ -14,27 +15,29 @@ import { Skill, SkillsService } from "../skills.service";
 })
 export class SkillDetailComponent implements OnInit {
     public backArrow = faArrowLeft;
-    public githubIcon = faCodeBranch;
-    public skill$: Observable<Skill>;
-    public triggerIcon = faComment;
+    public skill$: Observable<SkillDetail>;
 
     constructor(
+        private installService: InstallService,
         private route: ActivatedRoute,
         private router: Router,
-        private service: SkillsService
+        private skillsService: SkillsService
     ) { }
 
 
     ngOnInit() {
+        this.installService.getSkillInstallations();
         this.skill$ = this.route.paramMap.pipe(
-            switchMap((params: ParamMap) => this.service.getSkillById(params.get('id')))
+            switchMap(
+                (params: ParamMap) => this.skillsService.getSkillById(params.get('skillName'))
+            ),
+            tap(
+                () => {this.installService.getSkillInstallations();}
+            )
         );
     }
 
     navigateToGithubRepo(githubRepoUrl) {
         window.open(githubRepoUrl);
     }
-    // returnToSummary() {
-    //     this.router.navigate(['/skills']);
-    // }
 }
diff --git a/market/frontend/v1/market-ui/src/app/skills/skills.module.ts b/market/frontend/v1/market-ui/src/app/skills/skills.module.ts
index a2d6b7b6..d6e145e7 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skills.module.ts
+++ b/market/frontend/v1/market-ui/src/app/skills/skills.module.ts
@@ -10,8 +10,10 @@ import { InstallButtonComponent } from './shared/install-button/install-button.c
 import { InstallService } from "./install.service";
 import { MaterialModule } from "../shared/material.module";
 import { SkillCardComponent } from './skill-summary/skill-card/skill-card.component';
+import { SkillDetailBodyComponent } from './skill-detail/skill-detail-body/skill-detail-body.component';
 import { SkillCardHeaderComponent } from "./skill-summary/skill-card/skill-card-header.component";
 import { SkillDetailComponent } from "./skill-detail/skill-detail.component";
+import { SkillDetailHeaderComponent } from './skill-detail/skill-detail-header/skill-detail-header.component';
 import { SkillSearchComponent} from "./skill-summary/skill-search/skill-search.component";
 import { SkillsRoutingModule } from "./skills-routing.module";
 import { SkillsService } from "./skills.service";
@@ -32,6 +34,8 @@ import { SkillSummaryComponent } from "./skill-summary/skill-summary.component";
             SkillCardComponent,
             SkillCardHeaderComponent,
             SkillDetailComponent,
+            SkillDetailBodyComponent,
+            SkillDetailHeaderComponent,
             SkillSearchComponent,
             SkillSummaryComponent,
             InstallButtonComponent