diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 12c4b3794b..983a59364c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -179,12 +179,10 @@
 
     font-size: 14px;
     font-weight: bold;
-    text-transform: capitalize;
 
     height: 38px;
     line-height: 38px;
 
-
     max-width: 100%;
     padding: 0 18px;
 
@@ -200,6 +198,8 @@
     border-radius: 3px;
     border: 0 none;
 
+    cursor: pointer;
+
     transition: background-color 80ms ease, color 80ms ease;
 }
 
@@ -226,18 +226,34 @@
 	background-color: @blueDark;
 }
 
-.umb-era-button.-red-orange {
-    background-color: #FF3F34;
-    color: white;
+.umb-era-button.-link {
+	padding: 0;
+    background: transparent;
 }
 
+.umb-era-button.-link:hover {
+	background-color: transparent;
+    opacity: .6;
+}
+
+.umb-era-button.-inactive {
+	cursor: not-allowed;
+    background: whitesmoke;
+	color: @grayMed;
+}
+
+.umb-era-button.-inactive:hover {
+    background: whitesmoke;
+	color: @grayMed;
+}
+
+
 .umb-era-button.-full-width {
     display: block;
     width: 100%;
 }
 
 
-
 /* CATEGORIES */
 
 .umb-packages-categories {
@@ -499,3 +515,91 @@
     display: flex;
     justify-content: flex-end;
 }
+
+
+
+// Install local package
+
+// Accept terms
+.umb-accept-terms {
+    margin-bottom: 40px;
+    display: flex;
+    align-items: center;
+
+    font-size: 13px;
+}
+
+.umb-package-installer-label .label-text {
+    margin-left: 5px;
+}
+
+.umb-package-installer-label input[type="radio"],
+.umb-package-installer-label input[type="checkbox"] {
+    margin-top: 0px;
+}
+
+.umb-package-installer-label {
+    display: flex;
+    align-items: center;
+
+    font-size: 13px;
+    user-select: none;
+}
+
+// Install local package
+.umb-center-allthings {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    max-width: 640px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+
+// Upload state
+.umb-upload-local input[type="file"] {
+    display: none;
+}
+
+.umb-upload-local {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    margin: 40px auto;
+}
+
+.umb-upload-local .loaded {
+    margin-left: 10px;
+}
+
+.umb-upload-local .upload i {
+    font-size: 20px;
+    line-height: 1;
+}
+
+.umb-upload-local .-large {
+    font-size: 18px;
+}
+
+.uploaded-file-name {
+    margin-left: 10px;
+}
+
+
+// Info state
+.umb-info-local {
+
+}
+
+.umb-info-local-item {
+    margin: 10px 0;
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js
index 9ac88fe6f9..56a67db062 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.controller.js
@@ -1,7 +1,31 @@
 (function () {
     "use strict";
 
+    function PackagesInstallLocalController($scope, $route, $location) {
 
-    angular.module("umbraco").controller("Umbraco.Editors.Packages.InstallLocalController");
+        var vm = this;
+
+        vm.state = "upload";
+        vm.localPackage = {
+            "packageName": "SvgIconPicker Version: 0.1.0",
+            "packageAuthor": "Søren Kottal",
+            "packageAuthorLink": "https://github.com/skttl/",
+            "packageInfo": "https://github.com/skttl/Umbraco.SvgIconPicker",
+            "packageLicens": "GPLv3",
+            "packageLicensLink": "http://www.gnu.org/licenses/quick-guide-gplv3.en.html",
+            "packageLicensAccept": false,
+            "packageReadme": false,
+            "filePath": "",
+            "riskAccept": false
+        };
+
+        vm.loadPackage = loadPackage;
+
+        function loadPackage(){
+            vm.state = "packageDetails";
+        }
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.Packages.InstallLocalController", PackagesInstallLocalController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html
index fa93b06f48..93fb7d17ff 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packagesNew/views/install-local.html
@@ -1,7 +1,82 @@
-<div ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm" class="clearfix">
+<div class="clearfix" ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm">
 
-    <umb-load-indicator ng-if="page.loading"></umb-load-indicator>
 
-    Install Local
+    <!-- Upload -->
+    <div class="umb-upload-local" ng-if="vm.state === 'upload'">
+        <form novalidate name="localPackageForm" class="umb-center-allthings">
+            <h3><strong>Install local package</strong></h3>
+            <p>Browse for local packages, they usally have a ".zip" extension. You can find trusted packages on our.umbraco.com or in the package tab in Umbraco</p>
+
+
+            <div class="umb-upload-local">
+                <label for="body_file1">
+
+                    <div class="umb-era-button -blue upload">
+                        <i class="icon-cloud-upload large"></i>
+                        <span class="uploaded-file-name">Choose file</span>
+                    </div>
+
+                    <input class="input-file" name="ctl00$body$file1" type="file" id="body_file1" onchange="enableButton();">
+
+                </label>
+            </div>
+
+
+            <label for="accept-terms" class="umb-accept-terms umb-package-installer-label">
+                <input type="checkbox" id="accept-terms" ng-model="vm.localPackage.riskAccept" required>
+                <strong class="label-text">I understand the security risks associated with installing a local package</strong>
+            </label>
+
+            <button type="button"
+                    class="umb-era-button -blue loaded"
+                    ng-class="{'-inactive' : localPackageForm.$invalid}"
+                    ng-disabled="localPackageForm.$invalid"
+                    ng-click="vm.loadPackage()">Load package and proceed
+            </button>
+        </form>
+    </div>
+
+
+    <!-- Package details -->
+    <div class="umb-info-local umb-center-allthings" ng-if="vm.state === 'packageDetails'">
+        <h3 class="umb-info-local-item"><strong>{{ vm.localPackage.packageName }}</strong></h3>
+
+        <div class="umb-info-local-item">
+            <strong>Author</strong>
+            <a href="{{ vm.localPackage.packageAuthorLink }}" target="_blank">{{ vm.localPackage.packageAuthor }}</a>
+        </div>
+
+        <div class="umb-info-local-item">
+            <strong>Repository</strong>
+            <a href="{{ vm.localPackage.packageInfo }}" target="_blank">{{ vm.localPackage.packageInfo }}</a>
+        </div>
+
+        <div class="umb-info-local-item">
+            <strong>License</strong>
+            <a href="{{ vm.localPackage.packageLicensLink }}">{{ vm.localPackage.packageLicens }}</a>
+        </div>
+
+        <div class="umb-info-local-item">
+            <strong>Accept license</strong>
+            <label for="licens-accept" class="umb-package-installer-label">
+                <input type="checkbox" id="licens-accept" ng-model="vm.localPackage.packageLicensAccept" required>
+                <strong class="label-text">I accept License</strong>
+            </label>
+        </div>
+
+        <div class="umb-info-local-item">
+            <strong>Read me</strong>
+        </div>
+
+        <button type="button"
+                class="umb-era-button -blue">
+                Install package
+        </button>
+    </div>
+
+    <pre>
+        {{ vm.localPackage | json }}
+    </pre>
+
 
 </div>