diff --git a/src/common/_mixins.scss b/src/common/_mixins.scss
new file mode 100644
index 0000000..669719d
--- /dev/null
+++ b/src/common/_mixins.scss
@@ -0,0 +1,305 @@
+@mixin fade-in {
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+}
+
+@mixin fade-out {
+    @keyframes fadeOut {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+}
+
+@mixin direction() {
+    [dir="ltr"] & {
+        direction: ltr;
+    }
+    [dir="rtl"] & {
+        direction: rtl;
+    }
+}
+
+@mixin translate-x($value) {
+    [dir="ltr"] & {
+        transform: translateX($value);
+    }
+    [dir="rtl"] & {
+        transform: translateX(-$value);
+    }
+}
+
+@mixin translate-xy($valueX, $valueY) {
+    [dir="ltr"] & {
+        transform: translateX($valueX) translateY($valueY);
+    }
+    [dir="rtl"] & {
+        transform: translateX(-$valueX) translateY($valueY);
+    }
+}
+
+@mixin padding-right($value) {
+    [dir="ltr"] & {
+        padding-right: $value;
+    }
+    [dir="rtl"] & {
+        padding-left: $value;
+    }
+}
+
+@mixin padding-right-important($value) {
+    [dir="ltr"] & {
+        padding-right: $value !important;
+    }
+    [dir="rtl"] & {
+        padding-left: $value !important;
+    }
+}
+
+@mixin padding-left($value) {
+    [dir="ltr"] & {
+        padding-left: $value;
+    }
+    [dir="rtl"] & {
+        padding-right: $value;
+    }
+}
+
+@mixin padding-x($value) {
+    [dir="ltr"] & {
+        padding-left: $value;
+        padding-right: $value;
+    }
+    [dir="rtl"] & {
+        padding-left: $value;
+        padding-right: $value;
+    }
+}
+
+@mixin padding-yx($padding-y, $padding-x) {
+    padding-top: $padding-y;
+    padding-bottom: $padding-y;
+
+    [dir="ltr"] & {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    }
+    [dir="rtl"] & {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    }
+}
+
+@mixin padding($padding-top, $padding-right, $padding-bottom, $padding-left) {
+    padding-top: $padding-top;
+    padding-bottom: $padding-bottom;
+
+    [dir="ltr"] & {
+        padding-left: $padding-left;
+        padding-right: $padding-right;
+    }
+    [dir="rtl"] & {
+        padding-left: $padding-right;
+        padding-right: $padding-left;
+    }
+}
+
+@mixin margin-right($value) {
+    [dir="ltr"] & {
+        margin-right: $value;
+    }
+    [dir="rtl"] & {
+        margin-left: $value;
+    }
+}
+
+@mixin margin-left($value) {
+    [dir="ltr"] & {
+        margin-left: $value;
+    }
+    [dir="rtl"] & {
+        margin-right: $value;
+    }
+}
+
+@mixin margin-x($value) {
+    [dir="ltr"] & {
+        margin-left: $value;
+        margin-right: $value;
+    }
+    [dir="rtl"] & {
+        margin-left: $value;
+        margin-right: $value;
+    }
+}
+
+@mixin margin-yx($margin-y, $margin-x) {
+    margin-top: $margin-y;
+    margin-bottom: $margin-y;
+
+    [dir="ltr"] & {
+        margin-left: $margin-x;
+        margin-right: $margin-x;
+    }
+    [dir="rtl"] & {
+        margin-left: $margin-x;
+        margin-right: $margin-x;
+    }
+}
+
+@mixin margin($margin-top, $margin-right, $margin-bottom, $margin-left) {
+    margin-top: $margin-top;
+    margin-bottom: $margin-bottom;
+
+    [dir="ltr"] & {
+        margin-left: $margin-left;
+        margin-right: $margin-right;
+    }
+    [dir="rtl"] & {
+        margin-left: $margin-right;
+        margin-right: $margin-left;
+    }
+}
+
+@mixin border-right($value) {
+    [dir="ltr"] & {
+        border-right: $value;
+    }
+    [dir="rtl"] & {
+        border-left: $value;
+    }
+}
+
+@mixin border-right-important($value) {
+    [dir="ltr"] & {
+        border-right: $value !important;
+    }
+    [dir="rtl"] & {
+        border-left: $value !important;
+    }
+}
+
+@mixin border-left($value) {
+    [dir="ltr"] & {
+        border-left: $value;
+    }
+    [dir="rtl"] & {
+        border-right: $value;
+    }
+}
+
+@mixin border-left-important($value) {
+    [dir="ltr"] & {
+        border-left: $value !important;
+    }
+    [dir="rtl"] & {
+        border-right: $value !important;
+    }
+}
+
+@mixin border-x($value) {
+    [dir="ltr"] & {
+        border-left: $value;
+        border-right: $value;
+    }
+    [dir="rtl"] & {
+        border-left: $value;
+        border-right: $value;
+    }
+}
+
+@mixin border-yx($border-y, $border-x) {
+    border-top: $border-y;
+    border-bottom: $border-y;
+
+    [dir="ltr"] & {
+        border-left: $border-x;
+        border-right: $border-x;
+    }
+    [dir="rtl"] & {
+        border-left: $border-x;
+        border-right: $border-x;
+    }
+}
+
+@mixin border($border-top, $border-right, $border-bottom, $border-left) {
+    border-top: $border-top;
+    border-bottom: $border-bottom;
+
+    [dir="ltr"] & {
+        border-left: $border-left;
+        border-right: $border-right;
+    }
+    [dir="rtl"] & {
+        border-left: $border-right;
+        border-right: $border-left;
+    }
+}
+
+@mixin float($float) {
+    $float-ltr: $float;
+    $float-rtl: if($float == left, right, if($float == right, left, none));
+
+    [dir="ltr"] & {
+        float: $float-ltr;
+    }
+
+    [dir="rtl"] & {
+        float: $float-rtl;
+    }
+}
+
+@mixin right($value) {
+    [dir="ltr"] & {
+        right: $value;
+    }
+
+    [dir="rtl"] & {
+        left: $value;
+    }
+}
+
+@mixin left($value) {
+    [dir="ltr"] & {
+        left: $value;
+    }
+
+    [dir="rtl"] & {
+        right: $value;
+    }
+}
+
+@mixin text-align($alignment) {
+    $alignment-ltr: $alignment;
+    $alignment-rtl: if($alignment == left, right, if($alignment == right, left, $alignment));
+
+    [dir="ltr"] & {
+        text-align: $alignment-ltr;
+    }
+
+    [dir="rtl"] & {
+        text-align: $alignment-rtl;
+    }
+}
+
+@mixin background-position($position) {
+    $position-ltr: $position;
+    $position-rtl: if($position == left, right, if($position == right, left, $position));
+
+    [dir="ltr"] & {
+        background-position: $position-ltr;
+    }
+
+    [dir="rtl"] & {
+        background-position: $position-rtl;
+    }
+}
diff --git a/src/openlmis-header/header.html b/src/openlmis-header/header.html
index 5b84bd9..28d4f79 100644
--- a/src/openlmis-header/header.html
+++ b/src/openlmis-header/header.html
@@ -1,7 +1,7 @@
 <!-- ANGOLASUP-686: Visually distinguish between Test and Production Servers -->
-<div ng-controller="HeaderController as vm" 
-    class="openlmis-header" ng-class="{'is-offline':isOffline}" 
-    ng-style="{'background': '#ffffff'}" offline>
+<div ng-controller="HeaderController as vm"
+    class="openlmis-header" ng-class="{'is-offline':isOffline}"
+    ng-style="{'background': isOffline ?  'transparent' : '#ffffff'}" offline>
 <!-- ANGOLASUP-686: ends here -->
     <h1 class="title">{{'openlmisHeader.appHeader' | message}}</h1>
     <div class="openlmis-header-actions">
diff --git a/src/select-products-modal/select-products-modal.controller.js b/src/select-products-modal/select-products-modal.controller.js
new file mode 100644
index 0000000..9b554cf
--- /dev/null
+++ b/src/select-products-modal/select-products-modal.controller.js
@@ -0,0 +1,124 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+
+    'use strict';
+
+    /**
+     * @ngdoc controller
+     * @name select-products-modal.controller:SelectProductsModalController
+     *
+     * @description
+     * Manages Select Products Modal.
+     */
+    angular
+        .module('select-products-modal')
+        .controller('SelectProductsModalController', controller);
+
+    controller.$inject = ['orderables', '$state', 'selectProductsModalService', 'external', '$stateParams',
+        'isUnpackKitState'];
+
+    function controller(orderables, $state, selectProductsModalService, external, $stateParams,
+                        isUnpackKitState) {
+        var vm = this;
+
+        vm.$onInit = onInit;
+        vm.selectProducts = selectProductsModalService.resolve;
+        vm.close = selectProductsModalService.reject;
+        vm.search = search;
+        vm.submitDisabled = submitDisabled;
+
+        /**
+         * @ngdoc method
+         * @methodOf select-products-modal.controller:SelectProductsModalController
+         * @name $onInit
+         *
+         * @description
+         * Initialization method of the SelectProductsModalController.
+         */
+        function onInit() {
+            vm.orderables = orderables;
+            vm.selections = selectProductsModalService.getSelections();
+            vm.selected = _.mapObject(vm.selections, function(selection) {
+                return !!selection;
+            });
+            vm.external = external;
+            vm.code = $stateParams.productCode;
+            vm.name = $stateParams.productName;
+            vm.searchText = $stateParams.search;
+            vm.filteredOrderables = filterOrderables(orderables, $stateParams.search);
+            vm.isUnpackKitState = isUnpackKitState;
+        }
+
+        /**
+         * @ngdoc method
+         * @methodOf select-products-modal.controller:SelectProductsModalController
+         * @name search
+         *
+         * @description
+         * Refreshes the product list so the add product dialog box shows only relevant products
+         * without reloading parent state.
+         */
+        function search() {
+            if (vm.isUnpackKitState) {
+                var stateParams = angular.copy($stateParams);
+                stateParams.productCode = vm.code;
+                stateParams.productName = vm.name;
+                $state.go('.', stateParams, {
+                    reload: $state.$current.name,
+                    notify: false
+                });
+            } else {
+                $state.go('.', _.extend({}, $stateParams, {
+                    search: vm.searchText
+                }));
+            }
+        }
+
+        function filterOrderables(orderables, searchText) {
+            if (searchText) {
+                return orderables.filter(searchByCodeAndName);
+            }
+            return orderables;
+        }
+
+        function submitDisabled() {
+            for (var key in vm.selections) {
+                if (vm.selections[key]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        function searchByCodeAndName(orderable) {
+            var searchText = vm.searchText.toLowerCase();
+            var foundInFullProductName;
+            var foundInProductCode;
+
+            if (orderable.productCode !== undefined) {
+                foundInProductCode = orderable.productCode.toLowerCase().startsWith(searchText);
+            }
+
+            if (orderable.fullProductName !== undefined) {
+                foundInFullProductName = orderable.fullProductName.toLowerCase().contains(searchText);
+            }
+            return foundInFullProductName || foundInProductCode;
+        }
+
+    }
+
+})();
diff --git a/src/select-products-modal/select-products-modal.html b/src/select-products-modal/select-products-modal.html
new file mode 100644
index 0000000..622b215
--- /dev/null
+++ b/src/select-products-modal/select-products-modal.html
@@ -0,0 +1,94 @@
+<div class="modal add-product-modal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4>{{'selectProductsModal.addProducts' | message}}</h4>
+            </div>
+            <div class="modal-body">
+                <div class="openlmis-table-container" ng-if="vm.isUnpackKitState">
+                    <form ng-submit="vm.search()">
+                        <fieldset class="form-group">
+                            <label for="searchByName">
+                                {{'selectProductsModal.productName' | message}}
+                            </label>
+                            <input type="text" id="searchByName" name="searchByName" ng-model="vm.name" />
+                            <label for="searchByCode">
+                                {{'selectProductsModal.productCode' | message}}
+                            </label>
+                            <input type="text" id="searchByCode" name="searchByCode" ng-model="vm.code" />
+                        </fieldset>
+                        <input type="submit" value="{{'selectProductsModal.search' | message}}" />
+                    </form>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>{{'selectProductsModal.select' | message}}</th>
+                                <th>{{'selectProductsModal.code' | message}}</th>
+                                <th>{{'selectProductsModal.product' | message}}</th>
+                                <th>{{'selectProductsModal.uoi' | message}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="orderable in (vm.external ? vm.orderables : vm.orderablesPage)">
+                                <td><input type="checkbox" ng-model="vm.selected[orderable.id]"
+                                        ng-change="vm.selections[orderable.id] = (vm.selected[orderable.id] ? orderable : undefined)" />
+                                </td>
+                                <td>{{orderable.productCode}}</td>
+                                <td>{{orderable.fullProductName}}</td>
+                                <td>{{orderable.dispensable.displayUnit}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <openlmis-pagination pagination-id="'addOrderables'" ng-if="vm.external" />
+                    <openlmis-pagination pagination-id="'addOrderables'" ng-if="!vm.external" list="vm.orderables"
+                        paged-list="vm.orderablesPage" />
+                </div>
+                <form id="productForm" ng-submit="vm.selectProducts()" ng-if="!vm.isUnpackKitState">
+                    <fieldset class="form-group">
+                        <label for="search">
+                            {{'selectProductsModal.searchProduct' | message}}
+                        </label>
+                        <div class='products-modal-input'>
+                            <input type="text" id="search" name="search" ng-model="vm.searchText"
+                                style="margin-right: 20px" />
+                            <button class="primary" type="submit" ng-click="vm.search()">{{'requisitionInitiate.search'
+                                | message}}</button>
+                        </div>
+                    </fieldset>
+                    <br />
+                    <div class="openlmis-table-container">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>{{'selectProductsModal.select' | message}}</th>
+                                    <th>{{'selectProductsModal.code' | message}}</th>
+                                    <th>{{'selectProductsModal.product' | message}}</th>
+                                    <th>{{'selectProductsModal.uoi' | message}}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr ng-repeat="orderable in (vm.external ? vm.orderables : vm.orderablesPage)">
+                                    <td><input type="checkbox" ng-model="vm.selections[orderable.id]"
+                                            ng-true-value="{{orderable}}" /></td>
+                                    <td>{{orderable.productCode}}</td>
+                                    <td>{{orderable.fullProductName}}</td>
+                                    <td>{{orderable.dispensable.displayUnit}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <openlmis-pagination pagination-id="'addOrderables'" ng-if="vm.external" />
+                        <openlmis-pagination pagination-id="'addOrderables'" ng-if="!vm.external"
+                            list="vm.filteredOrderables" paged-list="vm.orderablesPage" />
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button id="cancel" ng-click="vm.close()">{{'selectProductsModal.cancel' | message}}</button>
+                <button ng-if="vm.isUnpackKitState" class="primary"
+                    ng-click="vm.selectProducts()" ng-disabled="vm.submitDisabled()">{{'selectProductsModal.addProducts' | message}}</button>
+                <button ng-if="!vm.isUnpackKitState" class="primary" type="submit" ng-disabled="vm.submitDisabled()"
+                    form="productForm">{{'selectProductsModal.addProducts' | message}}</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file