diff --git a/package.json b/package.json
index f7230e6..96177a0 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
     "description": "An Enyo-based template to build web applications using HTML, CSS and JavaScript.",
     "main": "index.js",
     "moduleDir": "src",
+    "scripts": {
+        "pack": "enyo pack"
+    },
     "assets": [
         "favicon.ico",
         "assets/**/*.*",
diff --git a/src/views/BrowserPanel.js b/src/views/BrowserPanel.js
index 419ba8e..c391929 100644
--- a/src/views/BrowserPanel.js
+++ b/src/views/BrowserPanel.js
@@ -17,6 +17,9 @@ var
   Collection = require('enyo/Collection'),
   SettingsPanel = require('./SettingsPanel.js');
 
+
+var repositoryBaseURL = new URL('webosbrew-repository/index.json', window.location.href).href;
+
 var AppListItem = kind({
   name: 'AppListItem',
   kind: Item,
@@ -40,7 +43,7 @@ var AppListItem = kind({
   },
 
   bindings: [
-    {from: 'model.name', to: '$.caption.content'},
+    {from: 'model.title', to: '$.caption.content'},
     {from: 'model.id', to: '$.subCaption.content'},
     {from: 'model.iconUri', to: '$.img.src'},
   ]
@@ -51,7 +54,7 @@ module.exports = kind({
   kind: Panel,
   title: 'Homebrew Channel',
   titleBelow: 'webosbrew.org',
-  // headerType: 'small',
+  headerType: 'medium',
   headerComponents: [
     {kind: IconButton, icon: 'rollbackward', ontap: 'refresh'},
     {kind: IconButton, icon: 'gear', ontap: 'openSettings'},
@@ -66,15 +69,15 @@ module.exports = kind({
     },
   ],
   bindings: [
-    {from: 'apps', to: '$.appList.collection'},
+    {from: 'repository', to: '$.appList.collection'},
     {
-      from: 'apps.status', to: '$.spinner.showing', transform: function (value) {
-        return this.apps.isBusy() && !this.apps.isError();
+      from: 'repository.status', to: '$.spinner.showing', transform: function (value) {
+        return this.repository.isBusy() && !this.repository.isError();
       }
     },
     {
-      from: 'apps.status', to: '$.errorPopup.showing', transform: function (value) {
-        return this.apps.isError();
+      from: 'repository.status', to: '$.errorPopup.showing', transform: function (value) {
+        return this.repository.isError();
       }
     },
   ],
@@ -84,18 +87,22 @@ module.exports = kind({
   },
   refresh: function () {
     console.info('refresh');
-    this.set('apps', new Collection({
+    this.set('repository', new Collection({
       source: new AjaxSource(),
-      url: '/webosbrew-repository/index.json',
+      url: repositoryBaseURL,
+      options: {parse: true},
+      parse: function (data) {
+        return data.packages;
+      },
     }));
-    this.apps.fetch();
+    this.repository.fetch();
   },
   events: {
     onRequestPushPanel: ''
   },
   itemSelected: function (sender, ev) {
     if (ev.model) {
-      this.doRequestPushPanel({panel: {kind: DetailsPanel, model: ev.model}});
+      this.doRequestPushPanel({panel: {kind: DetailsPanel, model: ev.model, repositoryURL: repositoryBaseURL}});
     }
   },
   openSettings: function (sender, ev) {
diff --git a/src/views/DetailsPanel.js b/src/views/DetailsPanel.js
index d29a8d6..01a7fa9 100644
--- a/src/views/DetailsPanel.js
+++ b/src/views/DetailsPanel.js
@@ -1,6 +1,19 @@
 var
   kind = require('enyo/kind'),
-  Panel = require('moonstone/Panel');
+  Panel = require('moonstone/Panel'),
+  AjaxSource = require('enyo/AjaxSource'),
+  Spinner = require('moonstone/Spinner'),
+  Popup = require('moonstone/Popup'),
+  Icon = require('moonstone/Icon'),
+  Divider = require('moonstone/Divider'),
+  Item = require('moonstone/Item'),
+  Model = require('enyo/Model'),
+  Button = require('moonstone/Button'),
+  ProgressButton = require('moonstone/ProgressButton'),
+  Marquee = require('moonstone/Marquee'),
+  MarqueeText = Marquee.Text,
+  BodyText = require('moonstone/BodyText'),
+  LabeledTextItem = require('moonstone/LabeledTextItem');
 
 module.exports = kind({
   name: 'DetailsPanel',
@@ -8,8 +21,128 @@ module.exports = kind({
   title: '',
   titleBelow: '',
   headerType: 'medium',
-  bindings: [
-    {from: 'model.name', to: 'title'},
-    {from: 'model.id', to: 'titleBelow'},
+  loading: true,
+  error: false,
+  components: [
+    {kind: Spinner, name: 'spinner', content: 'Loading...', center: true, middle: true},
+    {kind: Popup, name: 'errorPopup', content: 'An error occured while loading app info.', modal: false, autoDismiss: true, allowBackKey: true},
+    {
+      classes: 'moon-hspacing top', components: [
+        {
+          components: [
+            {kind: Divider, content: 'App information'},
+            {
+              kind: LabeledTextItem,
+              label: 'Version',
+              name: 'version',
+              text: 'unknown',
+              disabled: true,
+            },
+            {
+              kind: LabeledTextItem,
+              label: 'Root required',
+              name: 'rootRequired',
+              text: 'unknown',
+              disabled: true,
+            },
+            {
+              components: [
+                {
+                  name: 'installButton', kind: ProgressButton, content: 'Install', postContent: 'Launch', progress: 0,
+                  style: 'width:100%;min-width:100%;', ontap: 'installApp',
+                },
+              ],
+            },
+            {
+              components: [
+                {
+                  name: 'removeButton', kind: Button, content: 'Remove', style: 'width:100%;min-width:100%', small: true
+                },
+              ],
+            },
+          ],
+          classes: 'moon-6h',
+        },
+        {
+          components: [
+            {kind: Divider, content: 'Description'},
+            {kind: BodyText, content: 'Some long-ish project description......'},
+            {
+              kind: LabeledTextItem,
+              label: 'Project page',
+              name: 'projectPage',
+              text: 'unknown',
+              disabled: true,
+              ontap: 'openProjectPage',
+            },
+          ],
+          classes: 'moon-16h',
+        },
+      ],
+    },
   ],
+  bindings: [
+    // This is model passed when launching the view
+    {from: 'model.title', to: 'title'},
+    {from: 'model.id', to: 'titleBelow'},
+
+    // This is data loaded from the web service
+    {from: 'appInfo.title', to: 'title'},
+    {from: 'appInfo.id', to: 'titleBelow'},
+    {from: 'appInfo.version', to: '$.version.text'},
+    {from: 'appInfo.sourceUrl', to: '$.projectPage.text'},
+    {
+      from: 'appInfo.sourceUrl', to: '$.projectPage.disabled', transform: function (v) {
+        return v instanceof String && v.trim().length
+      }
+    },
+    {
+      from: 'appInfo.rootRequired', to: '$.rootRequired.text', transform: function (value) {
+        return value === true ? 'yes' : value === false ? 'no' : value === 'optional' ? 'optional' : 'unknown';
+      }
+    },
+
+    {
+      from: 'appInfo.status', to: '$.spinner.showing', transform: function (value) {
+        console.info(this.appInfo.isReady(), this.appInfo.isError(), this.appInfo.status);
+        return !this.appInfo.isReady() && !this.appInfo.isError();
+      }
+    },
+    {
+      from: 'appInfo.status', to: '$.errorPopup.showing', transform: function (value) {
+        console.info('error:', this.appInfo.isError());
+        return this.appInfo.isError();
+      }
+    },
+  ],
+
+  transitionFinished: function () {
+    // We are launching a web request in post transition to fix a race condition
+    // when showing the error popup, whoops.
+    console.info('transitionFinished');
+    this.refresh();
+  },
+
+  refresh: function () {
+    console.info('refresh');
+    this.set('appInfo', new Model(undefined, {
+      source: new AjaxSource(),
+      url: new URL(this.model.get('manifestUrl'), this.repositoryURL).href,
+    }));
+    this.appInfo.fetch({
+      // Why is model.status non-observable by default!?
+      success: function (t) {t.set('status', t.status);},
+      error: function (t) {t.set('status', t.status);},
+    });
+  },
+  openProjectPage: function () {
+    // TODO luna://com.webos.applicationManager/launch
+    // {
+    //   id: "com.webos.app.browser",
+    //   params: {target: "..."},
+    // }
+  },
+  installApp: function () {
+    this.$.installButton.animateProgressTo(100);
+  },
 });
diff --git a/src/views/SettingsPanel.js b/src/views/SettingsPanel.js
index 9ff3e40..3365e4f 100644
--- a/src/views/SettingsPanel.js
+++ b/src/views/SettingsPanel.js
@@ -5,7 +5,14 @@ var
   Divider = require('moonstone/Divider'),
   ToggleItem = require('moonstone/ToggleItem'),
   Tooltip = require('moonstone/Tooltip'),
-  Group = require('enyo/Group'),
+  Icon = require('moonstone/Icon'),
+  IconButton = require('moonstone/IconButton'),
+  ObjectActionDecorator = require('moonstone/ObjectActionDecorator'),
+  ItemOverlay = require('moonstone/ItemOverlay'),
+  ItemOverlaySupport = ItemOverlay.ItemOverlaySupport,
+  Marquee = require('moonstone/Marquee'),
+  MarqueeText = Marquee.Text,
+  Item = require('moonstone/Item'),
   Popup = require('moonstone/Popup'),
   TooltipDecorator = require('moonstone/TooltipDecorator'),
   LabeledTextItem = require('moonstone/LabeledTextItem');
@@ -21,7 +28,7 @@ module.exports = kind({
     {
       kind: Scroller, fit: true, components: [
         {
-          classes: 'moon-hspacing', components: [
+          classes: 'moon-hspacing top', components: [
             {
               components: [
                 {kind: Divider, content: 'Root configuration'},
@@ -29,7 +36,7 @@ module.exports = kind({
                 {kind: ToggleItem, content: 'SSH Server', onchange: 'itemChanged'},
                 {
                   kind: TooltipDecorator, components: [
-                    {kind: ToggleItem, content: 'Disable metrics', onchange: 'itemChanged'},
+                    {kind: ToggleItem, content: 'Disable metrics', onchange: 'itemChanged', checked: true},
                     {kind: Tooltip, content: 'This disables certain metrics reporting to TV manufacturer (crash logs, system logs)', position: 'below'}, // , position: 'right-below'}
                   ], style: 'width: 100%',
                 },
@@ -48,20 +55,21 @@ module.exports = kind({
                 },
               ],
               classes: 'moon-6h',
-              style: 'vertical-align: top',
             },
             {
               components: [
-                {kind: Divider, content: 'Repositories'},
+                {kind: Divider, content: 'Repositories (Coming Soon...)'},
+                {kind: ToggleItem, content: 'Default repository - https://repo.webosbrew.org', checked: true, disabled: true},
                 {
-                  kind: Group, onActivate: 'groupChanged', components: [
-                    {kind: ToggleItem, content: 'Group Option 1'},
-                    {kind: ToggleItem, content: 'Group Option 5'}
-                  ]
-                }
+                  kind: Item, mixins: [ItemOverlaySupport], components: [
+                    {kind: MarqueeText, content: 'https://repo.webosbrew.org/demo'}
+                  ], endingComponents: [
+                    {kind: Icon, icon: 'trash', small: true}
+                  ], disabled: true,
+                },
+                {kind: Item, content: 'Add repository', centered: true, style: 'margin-top: 3rem', disabled: true},
               ],
               classes: 'moon-16h',
-              style: 'vertical-align: top',
             }
           ]
         }
diff --git a/webosbrew-repository/index.json b/webosbrew-repository/index.json
index 8a59070..4637509 100644
--- a/webosbrew-repository/index.json
+++ b/webosbrew-repository/index.json
@@ -1,27 +1,34 @@
-[
-    {
-        "id": "com.moonlight",
-        "name": "Moonlight <i>TV</i>",
-        "iconUri": "https://raw.githubusercontent.com/mariotaku/moonlight-tv/main/deploy/webos/icon.png"
-    },
-    {
-        "id": "hbchannel",
-        "name": "Homebrew Channel",
-        "iconUri": "https://raw.githubusercontent.com/webosbrew/webos-homebrew-channel/main/frontend/icon160.png"
-    },
-    {
-        "id": "choclate-doom",
-        "name": "Choclate Doom",
-        "iconUri": "https://raw.githubusercontent.com/webosbrew/chocolate-doom/webos-tv/data/doom.png"
-    },
-    {
-        "id": "youtube.webos",
-        "name": "YouTube (adfree)",
-        "iconUri": "https://raw.githubusercontent.com/FriedChickenButt/youtube-webos/main/largeIcon.png"
-    },
-    {
-        "id": "youtube.webosaaaaaaaaaaaaaaaaaaaaa",
-        "name": "YouTube (adfree) longnaaaaaaaaaaaaaaameeeeeeeeeeeeeeeeeeeee",
-        "iconUri": "https://raw.githubusercontent.com/FriedChickenButt/youtube-webos/main/largeIcon.png"
-    }
-]
+{
+    "packages": [
+        {
+            "id": "com.moonlight",
+            "title": "Moonlight <i>TV</i>",
+            "manifestUrl": "moonlight.json",
+            "iconUri": "https://raw.githubusercontent.com/mariotaku/moonlight-tv/main/deploy/webos/icon.png"
+        },
+        {
+            "id": "hbchannel",
+            "title": "Homebrew Channel",
+            "manifestUrl": "hbchannel.json",
+            "iconUri": "https://raw.githubusercontent.com/webosbrew/webos-homebrew-channel/main/frontend/icon160.png"
+        },
+        {
+            "id": "choclate-doom",
+            "title": "Choclate Doom",
+            "manifestUrl": "chocolate-doom.json",
+            "iconUri": "https://raw.githubusercontent.com/webosbrew/chocolate-doom/webos-tv/data/doom.png"
+        },
+        {
+            "id": "youtube.webos",
+            "title": "YouTube (adfree)",
+            "manifestUrl": "youtube.json",
+            "iconUri": "https://raw.githubusercontent.com/FriedChickenButt/youtube-webos/main/largeIcon.png"
+        },
+        {
+            "id": "youtube.webosaaaaaaaaaaaaaaaaaaaaa",
+            "title": "YouTube (adfree) longnaaaaaaaaaaaaaaameeeeeeeeeeeeeeeeeeeee",
+            "manifestUrl": "youtube.json",
+            "iconUri": "https://raw.githubusercontent.com/FriedChickenButt/youtube-webos/main/largeIcon.png"
+        }
+    ]
+}
diff --git a/webosbrew-repository/moonlight.json b/webosbrew-repository/moonlight.json
new file mode 100644
index 0000000..4e2fd37
--- /dev/null
+++ b/webosbrew-repository/moonlight.json
@@ -0,0 +1,13 @@
+{
+    "id": "com.moonlight",
+    "version": "0.6.8",
+    "type": "native",
+    "title": "Moonlight TV",
+    "iconUri": "",
+    "sourceUrl": "https://github.com/mariotaku/moonlight-tv",
+    "rootRequired": false,
+    "ipkUrl": "https://github.com/mariotaku/moonlight-tv/releases/download/v0.6.8/com.limelight.webos_0.6.8_arm.ipk",
+    "ipkHash": {
+        "sha256": ""
+    }
+}