diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 51aab8460f6..57599876f5a 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -24,6 +24,7 @@ export default Vue.component('environment-component', {
       state: store.state,
       visibility: 'available',
       isLoading: false,
+      isLoadingFolderContent: false,
       cssContainerClass: environmentsData.cssClass,
       endpoint: environmentsData.environmentsDataEndpoint,
       canCreateDeployment: environmentsData.canCreateDeployment,
@@ -68,15 +69,21 @@ export default Vue.component('environment-component', {
     this.fetchEnvironments();
 
     eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+    eventHub.$on('toggleFolder', this.toggleFolder);
   },
 
   beforeDestroyed() {
     eventHub.$off('refreshEnvironments');
+    eventHub.$off('toggleFolder');
   },
 
   methods: {
-    toggleRow(model) {
-      return this.store.toggleFolder(model.name);
+    toggleFolder(folder) {
+      this.store.toggleFolder(folder);
+
+      if (!folder.isOpen) {
+        this.fetchChildEnvironments(folder);
+      }
     },
 
     /**
@@ -117,6 +124,24 @@ export default Vue.component('environment-component', {
           new Flash('An error occurred while fetching the environments.');
         });
     },
+
+    fetchChildEnvironments(folder) {
+      this.isLoadingFolderContent = true;
+
+      this.service.getFolderContent(folder.folderName)
+        .then(resp => resp.json())
+        .then((response) => {
+          console.log(response);
+          this.store.folderContent(folder, response.environments);
+        })
+        .then(() => {
+          this.isLoadingFolderContent = false;
+        })
+        .catch(() => {
+          this.isLoadingFolderContent = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 66ed10e19d1..8cfaeb69233 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -6,6 +6,7 @@ import StopComponent from './environment_stop';
 import RollbackComponent from './environment_rollback';
 import TerminalButtonComponent from './environment_terminal_button';
 import CommitComponent from '../../vue_shared/components/commit';
+import eventHub from '../event_hub';
 
 /**
  * Envrionment Item Component
@@ -391,16 +392,6 @@ export default {
 
       return '';
     },
-
-    /**
-     * Constructs folder URL based on the current location and the folder id.
-     *
-     * @return {String}
-     */
-    folderUrl() {
-      return `${window.location.pathname}/folders/${this.model.folderName}`;
-    },
-
   },
 
   /**
@@ -418,6 +409,12 @@ export default {
     return true;
   },
 
+  methods: {
+    onClickFolder() {
+      eventHub.$emit('toggleFolder', this.model);
+    },
+  },
+
   template: `
     <tr>
       <td>
@@ -426,7 +423,21 @@ export default {
           :href="environmentPath">
           {{model.name}}
         </a>
-        <a v-else class="folder-name" :href="folderUrl">
+        <span v-else
+          class="folder-name"
+          @click="onClickFolder">
+
+          <span class="folder-icon">
+            <i
+              v-show="model.isOpen"
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+            <i
+              v-show="!model.isOpen"
+              class="fa fa-caret-right"
+              aria-hidden="true"/>
+          </span>
+
           <span class="folder-icon">
             <i class="fa fa-folder" aria-hidden="true"></i>
           </span>
@@ -438,7 +449,7 @@ export default {
           <span class="badge">
             {{model.size}}
           </span>
-        </a>
+        </span>
       </td>
 
       <td class="deployment-column">
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
index 486389973d3..d59cb6500a2 100644
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -54,11 +54,10 @@ export default {
             :can-read-environment="canReadEnvironment"
             :service="service"></tr>
 
-          <tr v-if="model.isOpen && model.children && model.children.length > 0"
+          <tr v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"
             is="environment-item"
             v-for="children in model.children"
             :model="children"
-            :toggleRow="toggleRow.bind(children)"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
             :service="service"></tr>
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 07040bf0d73..d5729c9d1c5 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -6,7 +6,14 @@ Vue.use(VueResource);
 
 export default class EnvironmentsService {
   constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
+    /**
+     * FIX ME: This should be sent by backend.
+     */
+    const customActions = {
+      folderContent: { method: 'GET', url: `${window.location.pathname}/folders{/name}?perPage=2` },
+    };
+
+    this.environments = Vue.resource(endpoint, {}, customActions);
   }
 
   get(scope, page) {
@@ -16,4 +23,9 @@ export default class EnvironmentsService {
   postAction(endpoint) {
     return Vue.http.post(endpoint, {}, { emulateJSON: true });
   }
+
+  getFolderContent(folderName) {
+    debugger
+    return this.environments.folderContent({ name: folderName });
+  }
 }
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index f05fe6e60ae..a1c0988f1f5 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -38,7 +38,12 @@ export default class EnvironmentsStore {
       let filtered = {};
 
       if (env.size > 1) {
-        filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
+        filtered = Object.assign({}, env, {
+          isFolder: true,
+          folderName: env.name,
+          isOpen: false,
+          children: [],
+        });
       }
 
       if (env.latest) {
@@ -86,7 +91,36 @@ export default class EnvironmentsStore {
     return count;
   }
 
-  toggleRow(name) {
-
+  /**
+    * Toggles folder open property given the given folder.
+    *
+    * @param  {String} envType
+    * @return {Array}
+    */
+  toggleFolder(folder) {
+    return this.updateFolder(folder, 'isOpen', !folder.isOpen);
   }
+
+  folderContent(folder, environments) {
+    debugger;
+    return this.updateFolder(folder, 'children', environments);
+  }
+
+  updateFolder(folder, prop, newValue) {
+    const environments = this.state.environments;
+    debugger;
+    const updatedEnvironments = environments.map((env) => {
+      const updateEnv = Object.assign({}, env);
+      if (env.isFolder && env.id === folder.id) {
+        updateEnv[prop] = newValue;
+      }
+
+      return updateEnv;
+    });
+    debugger;
+
+    console.log(updatedEnvironments);
+    this.state.environments = updatedEnvironments;
+  }
+
 }