Index: src/stock-on-hand-mobile/pages/program-select.jsx
===================================================================
diff -u -N -r95eac7091708c61fd9b3e5bc296833980ea73812 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/pages/program-select.jsx	(.../program-select.jsx)	(revision 95eac7091708c61fd9b3e5bc296833980ea73812)
+++ src/stock-on-hand-mobile/pages/program-select.jsx	(.../program-select.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -39,115 +39,107 @@
     const [supervisedFacilitiesOptions, setSupervisedFacilitiesOptions] = useState([]);
 
     const radioChangeHandler = (e) => {
-      if (facilityType !== e.target.value) {
-        if (e.target.value == 'MyFacility') {
-          setFacilityId(facility.id);
-        } else {
-          setFacilityId(null);
-        }
-        setFacilityType(e.target.value);
+        setFacilityId(null);
         setProgramId(null);
-      }
+        setFacilityType(e.target.value);
     };
 
     const supervisedProgramsHandler = (value) => {
       setProgramId(value);
       setSupervisedFacilitiesOptions(supervisedFacilities[value]);
     };
 
-
     const handleSearch = (programId, facilityId) => {
       history.push(`/stockOnHand/${facilityId}/${programId}`);
     } 
     
     const menu = document.getElementsByClassName('header ng-scope')[0];
     
     useEffect(() => {
-      setFacilityId(facility.id);
       menu.style.display = '';
-    }, [menu, programId]);
+    }, [menu]);
 
     return (
         <>
-            <div className='page-header-responsive'>
-                <h2 id='program-select-header'>
-                  Stock on Hand
-                </h2>
-            </div>
-            <div className='page-content'>
-                <label 
-                  id='facility-type-header' 
-                  style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}
-                >
-                  Facility Type
-                </label>
-                <div>
-                  <RadioButton
-                      changed={radioChangeHandler}
-                      id='1'
-                      isSelected={facilityType === 'MyFacility'}
-                      label={`My Facility `}
-                      additionalInfo={`(${facility.name})`}
-                      value='MyFacility'
-                  />
-                  <RadioButton
-                      changed={radioChangeHandler}
-                      id='2'
-                      isSelected={facilityType === 'SupervisedFacility'}
-                      label='Supervised Facility'
-                      value='SupervisedFacility'
-                      disabled={!supervisedPrograms}
-                  />
-                </div>
-                <div style={{marginTop: '8px', marginBottom: '8px'}}>
-                    <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}>
-                      <label id='facility-type-header'>
-                        Program
-                      </label>
+          <div className='page-header-responsive'>
+              <h2 id='program-select-header'>
+                Stock on Hand
+              </h2>
+          </div>
+          <div className='page-content'>
+              <label 
+                id='facility-type-header' 
+                style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}
+              >
+                Facility Type
+              </label>
+              <div>
+                <RadioButton
+                    changed={radioChangeHandler}
+                    id='1'
+                    isSelected={facilityType === 'MyFacility'}
+                    label={`My Facility `}
+                    additionalInfo={`(${facility.name})`}
+                    value='MyFacility'
+                />
+                <RadioButton
+                    changed={radioChangeHandler}
+                    id='2'
+                    isSelected={facilityType === 'SupervisedFacility'}
+                    label='Supervised Facility'
+                    value='SupervisedFacility'
+                    disabled={!supervisedPrograms}
+                />
+              </div>
+              <div style={{marginTop: '8px', marginBottom: '8px'}}>
+                  <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}>
+                    <label id='facility-type-header'>
+                      Program
+                    </label>
+                  </div>
+                  {facilityType !== 'SupervisedFacility' ? 
+                    <div className='field-full-width' style={{marginBottom: '8px'}}>
+                        <Select
+                          options={programs}
+                          onChange={(value) => {setProgramId(value); setFacilityId(facility.id)}}
+                        />
                     </div>
-                    {facilityType !== 'SupervisedFacility' ? 
-                      <div className='field-full-width' style={{marginBottom: '8px'}}>
-                          <Select
-                            options={programs}
-                            onChange={value => setProgramId(value)}
-                          />
+                  :
+                    <>
+                    <div className='field-full-width' style={{marginBottom: '8px'}}>
+                      <Select
+                        options={supervisedPrograms}
+                        onChange={supervisedProgramsHandler}
+                      />
+                    </div>
+                      <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}> 
+                        <label 
+                          id='facility-type-header'
+                        >
+                          Facility
+                        </label>
                       </div>
-                    :
-                      <>
                       <div className='field-full-width' style={{marginBottom: '8px'}}>
-                        <Select
-                          options={supervisedPrograms}
-                          onChange={supervisedProgramsHandler}
+                        <InputWithSuggestions 
+                          data={supervisedFacilitiesOptions}
+                          displayValue='name'
+                          onClick={value => setFacilityId(value.id)}
+                          sortFunction={(a, b) => a.name.localeCompare(b.name)}
                         />
                       </div>
-                        <div className='required' style={{marginBottom: '4px', fontFamily: 'Arial', fontSize: '16px'}}> 
-                          <label 
-                            id='facility-type-header'
-                          >
-                            Facility
-                          </label>
-                        </div>
-                        <div className='field-full-width' style={{marginBottom: '8px'}}>
-                          <InputWithSuggestions 
-                            data={supervisedFacilitiesOptions}
-                            displayValue='name'
-                            onClick={value => setFacilityId(value.id)}
-                            sortFunction={(a, b) => a.name.localeCompare(b.name)}
-                          />
-                        </div>
-                      </> 
-                    }
-                </div>
-                <button 
-                  className='primary'
-                  type='button'
-                  style={{ marginTop: '0.5em' }}
-                  disabled={!programId || !facilityId}
-                  onClick={() => handleSearch(programId, facilityId)}
-                >
-                  Search
-                </button>
-            </div>
+                    </> 
+                  }
+              </div>
+              <button 
+                className='primary'
+                type='button'
+                style={{ marginTop: '0.5em' }}
+                disabled={!programId || !facilityId}
+                onClick={() => handleSearch(programId, facilityId)}
+              >
+                Search
+              </button>
+          </div>
         </>
     );
 };
Index: src/stock-on-hand-mobile/pages/stock-on-hand.jsx
===================================================================
diff -u -N -r95eac7091708c61fd9b3e5bc296833980ea73812 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/pages/stock-on-hand.jsx	(.../stock-on-hand.jsx)	(revision 95eac7091708c61fd9b3e5bc296833980ea73812)
+++ src/stock-on-hand-mobile/pages/stock-on-hand.jsx	(.../stock-on-hand.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -13,12 +13,43 @@
  * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  */
 
-const StockOnHand = () => {
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { setFacilityStockOnHand } from '../reducers/facilities';
+import { setProgramStockOnHand } from '../reducers/programs';
+
+const StockOnHand = ({ facilityService, programService }) => {
+    const { facilityId, programId } = useParams();
+    const dispatch = useDispatch();
+    
+    const facility = useSelector(state => state['facilitiesStockOnHand']['facilityStockOnHand']);
+    const program = useSelector(state => state['programsStockOnHand']['programStockOnHand']);
+
+    const downloadFacilityData = () => {
+        return facilityService.get(facilityId).then((facility) => {
+            dispatch(setFacilityStockOnHand(facility));
+        })
+    }
+
+    const downloadProgramData = () => {
+        return programService.get(programId).then((program) => {
+            dispatch(setProgramStockOnHand(program));
+        })
+        
+    }
+
+    useEffect(() => {
+        Promise.all([downloadFacilityData(), downloadProgramData()]);
+    }, [facilityId, programId])
+
     return (
-        <div>
-            hello
+        <div className='page-header-responsive'>
+                <h2 id='program-select-header'>
+                  { facility && program && `Stock on Hand - ${facility.name} - ${program.name}`}
+                </h2>
         </div>
-    )
+    );
 };
 
 export default StockOnHand;
\ No newline at end of file
Index: src/stock-on-hand-mobile/reducers/facilities.jsx
===================================================================
diff -u -N -r7f9ffae3458e2f9994249398a1d526a3cbe861d6 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/reducers/facilities.jsx	(.../facilities.jsx)	(revision 7f9ffae3458e2f9994249398a1d526a3cbe861d6)
+++ src/stock-on-hand-mobile/reducers/facilities.jsx	(.../facilities.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -19,18 +19,26 @@
     name: 'facilitiesStockOnHand',
     initialState: {
         userHomeFacilityStockOnHand: null,
-        supervisedFacilitiesStockOnHand: []
+        supervisedFacilitiesStockOnHand: [],
+        facilityStockOnHand: null
     },
     reducers: {
         setUserHomeFacilityStockOnHand: (state, action) => {
             state.userHomeFacilityStockOnHand = action.payload;
         },
         setSupervisedFacilitiesStockOnHand: (state, action) => {
             state.supervisedFacilitiesStockOnHand = action.payload;
+        },
+        setFacilityStockOnHand: (state, action) => {
+            state.facilityStockOnHand = action.payload;
         }
     }
 });
 
-export const {setUserHomeFacilityStockOnHand, setSupervisedFacilitiesStockOnHand} = facilitiesStockOnHandSlice.actions;
+export const {
+    setUserHomeFacilityStockOnHand,
+    setSupervisedFacilitiesStockOnHand,
+    setFacilityStockOnHand 
+} = facilitiesStockOnHandSlice.actions;
 
 export default facilitiesStockOnHandSlice.reducer;
Index: src/stock-on-hand-mobile/reducers/programs.jsx
===================================================================
diff -u -N -r7f9ffae3458e2f9994249398a1d526a3cbe861d6 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/reducers/programs.jsx	(.../programs.jsx)	(revision 7f9ffae3458e2f9994249398a1d526a3cbe861d6)
+++ src/stock-on-hand-mobile/reducers/programs.jsx	(.../programs.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -19,18 +19,26 @@
     name: 'programsStockOnHand',
     initialState: {
         programsStockOnHand: [],
-        supervisedProgramsStockOnHand: []
+        supervisedProgramsStockOnHand: [],
+        programStockOnHand: {}
     },
     reducers: {
         setProgramsStockOnHand: (state, action) => {
             state.programsStockOnHand = action.payload;
         },
         setSupervisedProgramsStockOnHand: (state, action) => {
             state.supervisedProgramsStockOnHand = action.payload;
+        },
+        setProgramStockOnHand: (state, action) => {
+            state.programStockOnHand = action.payload;
         }
     }
 });
 
-export const {setProgramsStockOnHand, setSupervisedProgramsStockOnHand} = programsStockOnHandSlice.actions;
+export const {
+    setProgramsStockOnHand,
+    setSupervisedProgramsStockOnHand,
+    setProgramStockOnHand
+} = programsStockOnHandSlice.actions;
 
 export default programsStockOnHandSlice.reducer;
Index: src/stock-on-hand-mobile/stock-on-hand-app.jsx
===================================================================
diff -u -N -r95eac7091708c61fd9b3e5bc296833980ea73812 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/stock-on-hand-app.jsx	(.../stock-on-hand-app.jsx)	(revision 95eac7091708c61fd9b3e5bc296833980ea73812)
+++ src/stock-on-hand-mobile/stock-on-hand-app.jsx	(.../stock-on-hand-app.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -65,13 +65,13 @@
         });
 
         return result;
-    }
+    };
 
     const getFacilityById = (facilities, id) => {
         return facilities.filter(function(facility) {
             return facility.id === id;
         })[0];
-    }
+    };
 
     const getSupervisedFacilities = (programId, permissions, facilities) => {
         const facilityIds = [];
@@ -97,13 +97,13 @@
         });
 
         return result;
-    }
+    };
 
     const dispatchData = (actions) => {
         actions.forEach((action) => {
             dispatch(action);
-        })
-    }
+        });
+    };
 
     useEffect(() => {
         facilityFactory.getUserHomeFacility().then((facility) =>  {
@@ -127,8 +127,6 @@
                         setSupervisedFacilitiesStockOnHand(supervisedFacilities)
                     ]);
                     
-                }).catch((error) => {
-                    console.log(error);
                 });
         });
     } ,[facilityFactory]);
@@ -144,18 +142,21 @@
                 hashType='hashbang'
             >
                 <Switch>
-                    <Route path='/'>
+                    <Route path='/stockOnHand/:facilityId/:programId'>
                         {
                             userHomeFacilityStore &&
-                            <ProgramSelect
-                                offlineService={offlineService}
+                            <StockOnHand
+                                facilityService={facilityService}
+                                programService={programService}
                             />
                         }
                     </Route>
-                    <Route path='/stockOnHand/facility/program'>
+                    <Route path='/'>
                         {
                             userHomeFacilityStore &&
-                            <StockOnHand/>
+                            <ProgramSelect
+                                offlineService={offlineService}
+                            />
                         }
                     </Route>
                 </Switch>
Index: src/stock-on-hand-mobile/stock-on-hand.routes.js
===================================================================
diff -u -N -r95eac7091708c61fd9b3e5bc296833980ea73812 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/stock-on-hand.routes.js	(.../stock-on-hand.routes.js)	(revision 95eac7091708c61fd9b3e5bc296833980ea73812)
+++ src/stock-on-hand-mobile/stock-on-hand.routes.js	(.../stock-on-hand.routes.js)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -47,21 +47,11 @@
             accessRights: [STOCKMANAGEMENT_RIGHTS.STOCK_CARDS_VIEW]
         })
             .state('openlmis.stockmanagement.stockOnHandMobile.stockOnHand', {
-                url: '/stockOnHand',
+                url: '/stockOnHand/:facilityId/:programId',
                 isOffline: true,
-                // showInNavigation: false,
-                // showInNavigationOnLowResolutions: false,
+                showInNavigation: false,
+                showInNavigationOnLowResolutions: false,
                 accessRights: [STOCKMANAGEMENT_RIGHTS.STOCK_CARDS_VIEW]
-            })
-            .state('openlmis.stockmanagement.stockOnHandMobile.stockOnHand.facility', {
-                url: '/facility',
-                isOffline: true,
-                accessRights: [STOCKMANAGEMENT_RIGHTS.STOCK_CARDS_VIEW]
-            })
-            .state('openlmis.stockmanagement.stockOnHandMobile.stockOnHand.facility.program', {
-                url: '/program',
-                isOffline: true,
-                accessRights: [STOCKMANAGEMENT_RIGHTS.STOCK_CARDS_VIEW]
             });
     }
 })();
Index: src/stock-on-hand-mobile/stock-on-hand.wrapper.jsx
===================================================================
diff -u -N -r7f9ffae3458e2f9994249398a1d526a3cbe861d6 -r70261f5c7613f4d536564b3f96b1a73980da3ec5
--- src/stock-on-hand-mobile/stock-on-hand.wrapper.jsx	(.../stock-on-hand.wrapper.jsx)	(revision 7f9ffae3458e2f9994249398a1d526a3cbe861d6)
+++ src/stock-on-hand-mobile/stock-on-hand.wrapper.jsx	(.../stock-on-hand.wrapper.jsx)	(revision 70261f5c7613f4d536564b3f96b1a73980da3ec5)
@@ -36,7 +36,7 @@
         return {
             template: '<div id="mobileApp" class="stock-on-hand-mobile"></div>',
             replace: true,
-            link: function ($scope) {
+            link: function () {
                 const app = document.getElementById('mobileApp');
 
                 ReactDOM.render(