diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index af0e940..6f300d4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -1,4 +1,4 @@
-<div id="available">
+<div ng-cloak class="ng-hide ng-cloak" ng-show="show" id="available">
     <h3>{{available.name}}</h3>
     <p>{{available.desc}}</p>
     <button ng-click="changeBundle(available.id)">Apply</button>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
index bc36f1d..5683011 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -16,13 +16,11 @@
 
 div#bundle div.main-left {
     width: 61%;
-    padding-left: 1%;
+    padding: 4% 0 0 1%;
 }
 div#bundle div.main-right {
     width: 37%;
-    height: 85vh;
-    background-color: rgba(173, 216, 230, 0.25);
-    border-radius: 5px;
+    padding-top: 4%;
 }
 
 #bundle table {
@@ -57,18 +55,42 @@
     border: none;
 }
 
+#bundle img {
+    width: 100%;
+}
+
 #bundle h2 {
     text-align: center;
     padding: 3%;
-    background-color: rgba(173, 216, 230, 0.75);
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    color: white;
-    font-weight: normal;
+    font-weight: lighter;
+    border: 1px solid #3C3C3C;
+    cursor: pointer;
+}
+#bundle h2:hover {
+    color: #CE5650;
+    border-color: #CE5650;
+}
+
+div#bundles {
+    position: relative;
+}
+
+div#available.ng-hide-add.ng-hide-add-active,
+div#available.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.5s;
+    transition: all linear 0.5s;
+}
+div#available.ng-hide {
+    opacity: 0;
+    top: -80px;
 }
 
 div#available {
+    position: absolute;
     padding: 5%;
+    opacity: 1;
+    top: -10px;
+    width: 100%;
 }
 
 #available p {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index 1fafa79..fb4211f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -13,7 +13,10 @@
         </table>
     </div>
     <div class="main-right">
-        <h2>Available Bundles</h2>
-        <div bundle-available></div>
+        <img src="imgs/binary.jpg">
+        <div ng-click="showBundles()">
+            <h2>Available Bundles</h2>
+        </div>
+        <div id="bundles" bundle-available></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index c7281f9..a5b59d0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -28,6 +28,7 @@
                 var BundleData, resource,
                     getData;
                 $scope.page.curr = 'bundle';
+                $scope.show = false;
 
                 getData = function (id) {
                     if (!id) { id = ''; }
@@ -61,6 +62,10 @@
                     getData(id);
                 };
 
+                $scope.showBundles = function () {
+                    $scope.show = !$scope.show;
+                };
+
                 $log.debug('Cord Bundle Ctrl has been created.');
             }])