diff --git a/src/background.js b/src/background.js
index 70cc84ddfe..7988c831dd 100644
--- a/src/background.js
+++ b/src/background.js
@@ -2,3 +2,4 @@
 var tokenService = new TokenService();
 var apiService = new ApiService(tokenService);
 var userService = new UserService(tokenService, apiService);
+var siteService = new SiteService(cryptoService, userService, apiService);
diff --git a/src/manifest.json b/src/manifest.json
index f62b690d0a..95e1486921 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -24,6 +24,7 @@
       "services/tokenService.js",
       "services/apiService.js",
       "services/userService.js",
+      "services/siteService.js",
       "background.js"
     ]
   },
diff --git a/src/models/domainModels.js b/src/models/domainModels.js
index 3137c2be48..ed09723b5e 100644
--- a/src/models/domainModels.js
+++ b/src/models/domainModels.js
@@ -21,13 +21,15 @@
 }();
 
 var Site = function (obj) {
+    var cryptoService = chrome.extension.getBackgroundPage().cryptoService;
+
     this.id = obj.id;
     this.folderId = obj.folderId;
-    this.name = new CipherString(obj.name);
-    this.uri = new CipherString(obj.uri);
-    this.username = new CipherString(obj.username);
-    this.password = new CipherString(obj.password);
-    this.notes = new CipherString(obj.notes);
+    this.name = cryptoService.encrypt(obj.name);
+    this.uri = cryptoService.encrypt(obj.uri);
+    this.username = cryptoService.encrypt(obj.username);
+    this.password = cryptoService.encrypt(obj.password);
+    this.notes = cryptoService.encrypt(obj.notes);
     this.favorite = new obj.favorite;
 };
 
diff --git a/src/popup/app/services/backgroundService.js b/src/popup/app/services/backgroundService.js
index a47484361f..71ac01ed78 100644
--- a/src/popup/app/services/backgroundService.js
+++ b/src/popup/app/services/backgroundService.js
@@ -12,4 +12,7 @@
     })
     .factory('apiService', function () {
         return chrome.extension.getBackgroundPage().apiService;
+    })
+    .factory('siteService', function () {
+        return chrome.extension.getBackgroundPage().siteService;
     });
diff --git a/src/popup/app/vault/vaultAddSiteController.js b/src/popup/app/vault/vaultAddSiteController.js
index 6cdde90439..478dc5922d 100644
--- a/src/popup/app/vault/vaultAddSiteController.js
+++ b/src/popup/app/vault/vaultAddSiteController.js
@@ -1,6 +1,14 @@
 angular
     .module('bit.vault')
 
-    .controller('vaultAddSiteController', function ($scope) {
-        console.log('modal controller');
+    .controller('vaultAddSiteController', function ($scope, siteService) {
+        $scope.site = {
+            folderId: null
+        };
+        $scope.createSite = function (model) {
+            var site = new Site(model);
+            siteService.save(model, function () {
+
+            });
+        };
     });
diff --git a/src/popup/app/vault/vaultController.js b/src/popup/app/vault/vaultController.js
index 6e05133f56..d0c8a1e05f 100644
--- a/src/popup/app/vault/vaultController.js
+++ b/src/popup/app/vault/vaultController.js
@@ -2,15 +2,14 @@
     .module('bit.vault')
 
     .controller('vaultController', function ($scope, $ionicModal) {
-        $ionicModal.fromTemplateUrl('app/vault/views/vaultAddSite.html', {
-            scope: $scope,
-            animation: 'slide-in-up'
-        }).then(function (modal) {
-            $scope.addSiteModal = modal;
-        });
-
         $scope.addSite = function () {
-            $scope.addSiteModal.show();
+            $ionicModal.fromTemplateUrl('app/vault/views/vaultAddSite.html', {
+                scope: $scope,
+                animation: 'slide-in-up'
+            }).then(function (modal) {
+                $scope.addSiteModal = modal;
+                modal.show();
+            });
         };
 
         $scope.closeAddSite = function () {
@@ -19,16 +18,19 @@
 
         // Cleanup the modal when we're done with it!
         $scope.$on('$destroy', function () {
+            console.log('modal destroyed');
             $scope.addSiteModal.remove();
         });
 
         // Execute action on hide modal
         $scope.$on('modal.hidden', function () {
+            console.log('modal hidden');
             // Execute action
         });
 
         // Execute action on remove modal
         $scope.$on('modal.removed', function () {
+            console.log('modal removed');
             // Execute action
         });
     });
diff --git a/src/popup/app/vault/views/vaultAddSite.html b/src/popup/app/vault/views/vaultAddSite.html
index e64f59a3de..5ffb7efade 100644
--- a/src/popup/app/vault/views/vaultAddSite.html
+++ b/src/popup/app/vault/views/vaultAddSite.html
@@ -1,9 +1,63 @@
 <ion-modal-view>
     <ion-header-bar class="bar bar-header bar-positive">
-        <button class="button button-clear button-primary" ng-click="addSiteModal.hide()">Close</button>
+        <button class="button button-clear button-primary" ng-click="addSiteModal.hide()">Cancel</button>
         <h1 class="title">Add Site</h1>
+        <button class="button button-clear button-primary" ng-click="createSite(site)">Save</button>
     </ion-header-bar>
-    <ion-content class="padding" ng-controller="vaultAddSiteController">
-        Add a site content.
+    <ion-content ng-controller="vaultAddSiteController">
+        <div class="list">
+            <div class="item item-divider">
+                Site Information
+            </div>
+            <label class="item item-input item-stacked-label">
+                <span class="input-label">Name</span>
+                <input type="text" ng-model="site.name">
+            </label>
+            <label class="item item-input item-stacked-label">
+                <span class="input-label">URI</span>
+                <input type="url" ng-model="site.uri">
+            </label>
+            <label class="item item-input item-stacked-label">
+                <span class="input-label">Username</span>
+                <input type="text" ng-model="site.username">
+            </label>
+            <label class="item item-input item-stacked-label">
+                <span class="input-label">Password</span>
+                <input type="password" ng-model="site.password">
+            </label>
+            <a class="item item-icon-right" href="#">
+                Generate Password
+                <i class="icon ion-ios-arrow-right"></i>
+            </a>
+            <div class="item item-divider">
+                &nbsp;
+            </div>
+            <label class="item item-input item-select">
+                <div class="input-label">Folder</div>
+                <select>
+                    <option>Blue</option>
+                    <option selected>Green</option>
+                    <option>Red</option>
+                </select>
+            </label>
+            <div class="item item-toggle">
+                Favorite
+                <label class="toggle toggle-assertive">
+                    <input type="checkbox" ng-model="site.favorite">
+                    <div class="track">
+                        <div class="handle"></div>
+                    </div>
+                </label>
+            </div>
+            <div class="item item-divider">
+                Notes
+            </div>
+            <div class="item item-input">
+                <textarea rows="5" ng-model="site.notes"></textarea>
+            </div>
+            <div class="item item-divider">
+                &nbsp;
+            </div>
+        </div>
     </ion-content>
 </ion-modal-view>