diff --git a/changelogs/unreleased/-22c8vf8.yml b/changelogs/unreleased/-22c8vf8.yml
new file mode 100644
index 00000000..672790e1
--- /dev/null
+++ b/changelogs/unreleased/-22c8vf8.yml
@@ -0,0 +1,6 @@
+---
+title: Implemented logic to render data on order detail page
+ticket_id: "#22c8vf8"
+merge_request: 5
+author: Disha Talreja
+type: added
diff --git a/src/router/index.ts b/src/router/index.ts
index 7c6f3ee1..c4797fa6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import PurchaseOrder from '@/views/PurchaseOrder.vue'
+import OrderDetail from '@/views/OrderDetail.vue'
 import Login from '@/views/Login.vue'
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
@@ -32,6 +33,12 @@ const routes: Array<RouteRecordRaw> = [
     component: PurchaseOrder,
     beforeEnter: authGuard
   },
+  {
+    path: '/purchase-order-detail',
+    name: 'Purchase Order Detail',
+    component: OrderDetail,
+    beforeEnter: authGuard
+  },
   {
     path: '/login',
     name: 'Login',
diff --git a/src/store/RootState.ts b/src/store/RootState.ts
index 7623fafd..76363110 100644
--- a/src/store/RootState.ts
+++ b/src/store/RootState.ts
@@ -1,4 +1,5 @@
 export default interface RootState {
     user: any;
     product: any;
+    order: any;
 }
\ No newline at end of file
diff --git a/src/store/actions.ts b/src/store/actions.ts
index f35035e7..ff9d6841 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,6 +1,8 @@
 import { ActionTree } from 'vuex'
 import RootState from './RootState'
 
-const actions: ActionTree<RootState, RootState> = {}
+const actions: ActionTree<RootState, RootState> = {
+    
+}
 
 export default actions
diff --git a/src/store/index.ts b/src/store/index.ts
index 0b934398..d76289d8 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,6 +6,7 @@ import RootState from './RootState'
 import createPersistedState from "vuex-persistedstate";
 import userModule from './modules/user';
 import productModule from "./modules/product";
+import orderModule from "./modules/order";
 import SecureLS from "secure-ls";
 
 // We will be using secure-ls for secure localStorage data with high level of encryption and data compression.
@@ -60,7 +61,8 @@ const store = createStore<RootState>({
     plugins: [ persistState ],
     modules: { 
         'user': userModule,
-        'product': productModule
+        'product': productModule,
+        'order': orderModule
     },
 })
 
diff --git a/src/store/modules/order/OrderState.ts b/src/store/modules/order/OrderState.ts
new file mode 100644
index 00000000..0bc9f29c
--- /dev/null
+++ b/src/store/modules/order/OrderState.ts
@@ -0,0 +1,6 @@
+export default interface OrderState {
+    order: {
+      originalCsv: any,
+      modifiedCsv: any
+    }
+  }
\ No newline at end of file
diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
new file mode 100644
index 00000000..c2757f7b
--- /dev/null
+++ b/src/store/modules/order/actions.ts
@@ -0,0 +1,11 @@
+import { ActionTree } from 'vuex'
+import RootState from '@/store/RootState'
+import OrderState from './OrderState'
+import * as types from './mutation-types'
+
+const actions: ActionTree<OrderState, RootState> = {
+  uploadCsv({commit}, payload){
+      commit(types.UPLOAD_CSV,  payload );
+  }
+}    
+export default actions;
\ No newline at end of file
diff --git a/src/store/modules/order/getters.ts b/src/store/modules/order/getters.ts
new file mode 100644
index 00000000..ffe25c27
--- /dev/null
+++ b/src/store/modules/order/getters.ts
@@ -0,0 +1,10 @@
+import { GetterTree } from "vuex";
+import OrderState from "./OrderState";
+import RootState from "../../RootState";
+
+const getters: GetterTree<OrderState, RootState> = {
+  getCsv(state){
+    return state.order.originalCsv;
+  }
+};
+export default getters;   
\ No newline at end of file
diff --git a/src/store/modules/order/index.ts b/src/store/modules/order/index.ts
new file mode 100644
index 00000000..d94ab134
--- /dev/null
+++ b/src/store/modules/order/index.ts
@@ -0,0 +1,21 @@
+import getters from './getters'
+import { Module } from 'vuex'
+import actions from './actions'
+import mutations from './mutations'
+import OrderState from './OrderState'
+import RootState from '../../RootState'
+
+const productModule: Module<OrderState, RootState> = {
+  namespaced: true,
+  state: {
+    order: {
+      originalCsv: [],
+      modifiedCsv: []
+    }
+  },
+  actions,
+  getters,
+  mutations  
+}
+
+export default productModule;
\ No newline at end of file
diff --git a/src/store/modules/order/mutation-types.ts b/src/store/modules/order/mutation-types.ts
new file mode 100644
index 00000000..3ec83ead
--- /dev/null
+++ b/src/store/modules/order/mutation-types.ts
@@ -0,0 +1,2 @@
+export const SN_ORDER = 'order'
+export const UPLOAD_CSV = SN_ORDER + '/UPLOAD_CSV'
\ No newline at end of file
diff --git a/src/store/modules/order/mutations.ts b/src/store/modules/order/mutations.ts
new file mode 100644
index 00000000..4a823ab4
--- /dev/null
+++ b/src/store/modules/order/mutations.ts
@@ -0,0 +1,10 @@
+import { MutationTree } from 'vuex'
+import OrderState from './OrderState'
+import * as types from './mutation-types'
+
+const mutations: MutationTree <OrderState> = {
+  [types.UPLOAD_CSV] (state, payload) {
+    state.order.originalCsv = payload;
+  }
+}
+export default mutations;
\ No newline at end of file
diff --git a/src/store/modules/product/ProductState.ts b/src/store/modules/product/ProductState.ts
index 77197368..741a4488 100644
--- a/src/store/modules/product/ProductState.ts
+++ b/src/store/modules/product/ProductState.ts
@@ -1,4 +1,5 @@
 export default interface ProductState {
+  cached: any;
   products: {
     list: any;
     total: number;
diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts
index f3f7a3ce..2aa1485f 100644
--- a/src/store/modules/product/actions.ts
+++ b/src/store/modules/product/actions.ts
@@ -10,6 +10,34 @@ import emitter from '@/event-bus'
 
 const actions: ActionTree<ProductState, RootState> = {
 
+  async fetchProducts ( { commit, state }, { productIds }) {
+    const cachedProductIds = Object.keys(state.cached);
+    const productIdFilter= productIds.reduce((filter: string, productId: any) => {
+      // If product already exist in cached products skip
+      if (cachedProductIds.includes(productId)) {
+        return filter;
+      } else {
+        // checking condition that if the filter is not empty then adding 'OR' to the filter
+        if (filter !== '') filter += ' OR '
+        return filter += productId;
+      }
+    }, '');
+
+    // If there are no products skip the API call
+    if (productIdFilter === '') return;
+
+    const resp = await ProductService.fetchProducts({
+      "filters": ['internalName: (' + productIdFilter + ')']
+    })
+    if (resp.status === 200 && !hasError(resp)) {
+      const products = resp.data.response.docs;
+      // Handled empty response in case of failed query
+      if (resp.data) commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products });
+    }
+    // TODO Handle specific error
+    return resp;
+  },
+
   // Find Product
   async findProduct ({ commit, state }, payload) {
 
diff --git a/src/store/modules/product/getters.ts b/src/store/modules/product/getters.ts
index 94a9e5b6..d0b50a36 100644
--- a/src/store/modules/product/getters.ts
+++ b/src/store/modules/product/getters.ts
@@ -3,6 +3,10 @@ import ProductState from "./ProductState";
 import RootState from "../../RootState";
 
 const getters: GetterTree<ProductState, RootState> = {
+  getProduct: (state) => (productId: string) => {
+    // Returning empty object so that it doesn't breaks the UI
+    return state.cached[productId] ? state.cached[productId] : {};
+  },
   getSearchProducts(state) {
     return state.products.list;
   },
diff --git a/src/store/modules/product/index.ts b/src/store/modules/product/index.ts
index 7ea3a8de..628ce332 100644
--- a/src/store/modules/product/index.ts
+++ b/src/store/modules/product/index.ts
@@ -8,6 +8,7 @@ import RootState from '../../RootState'
 const productModule: Module<ProductState, RootState> = {
     namespaced: true,
     state: {
+      cached: {},
       products: {
         list: {},
         total: 0
diff --git a/src/store/modules/product/mutation-types.ts b/src/store/modules/product/mutation-types.ts
index 7f3cc39a..734c80c6 100644
--- a/src/store/modules/product/mutation-types.ts
+++ b/src/store/modules/product/mutation-types.ts
@@ -1,2 +1,3 @@
 export const SN_PRODUCT = 'product'
 export const PRODUCT_SEARCH_UPDATED = SN_PRODUCT + '/SEARCH_UPDATED'
+export const PRODUCT_ADD_TO_CACHED_MULTIPLE = SN_PRODUCT + '/ADD_TO_CACHED_MULTIPLE'
diff --git a/src/store/modules/product/mutations.ts b/src/store/modules/product/mutations.ts
index a5f80abe..023bf35a 100644
--- a/src/store/modules/product/mutations.ts
+++ b/src/store/modules/product/mutations.ts
@@ -6,6 +6,14 @@ const mutations: MutationTree <ProductState> = {
   [types.PRODUCT_SEARCH_UPDATED] (state, payload) {
     state.products.list = payload.products;
     state.products.total = payload.totalProductsCount;
-  }
+  },
+  [types.PRODUCT_ADD_TO_CACHED_MULTIPLE] (state, payload) {
+    // TODO
+    if (payload.products) {
+      payload.products.forEach((product: any) => {
+        state.cached[product.internalName] = product
+      });
+    }
+  },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
new file mode 100644
index 00000000..7b13a29b
--- /dev/null
+++ b/src/views/OrderDetail.vue
@@ -0,0 +1,137 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/home" />
+        <ion-title>{{ $t("PO External Order ID") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <div class="header">
+        <div class="search">
+          <ion-searchbar> </ion-searchbar>
+        </div> 
+
+        <div class="filters">
+          <ion-item>
+            <ion-label>{{ $t("Buffer days") }}</ion-label>
+            <ion-input type="text" placeholder="all items" /> 
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ $t("Order buffer") }}</ion-label>
+            <ion-input type="text" value="50" /> 
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ $t("Catalog") }}</ion-label>
+            <ion-select value="Backorder">
+              <ion-select-option>Backorder</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-button expand="block" fill="outline">Apply</ion-button>
+        </div> 
+      </div>  
+      <div class="list-item" v-for="(orderItem, index) in parsedCsv" :key="index" >
+        <ion-item lines="none">
+          <ion-thumbnail slot="start">
+            <Image :src="getProduct(orderItem.shopifyproductSKU).mainImageUrl" />
+          </ion-thumbnail>
+          <ion-label>
+            {{ getProduct(orderItem.shopifyproductSKU).internalName }}
+          </ion-label>
+        </ion-item>
+
+        <ion-chip outline>
+          <ion-label>{{ $t("Backorder") }}</ion-label>
+        </ion-chip>
+
+        <ion-chip outline>
+          <ion-label>{{ orderItem.quantityOrdered }} {{ $t("Ordered") }}</ion-label>
+        </ion-chip>
+
+        <ion-chip outline>
+          <ion-icon :icon="sendOutline" />
+          <ion-label>{{ orderItem.arrivalDate }}</ion-label>
+        </ion-chip>
+
+        <ion-checkbox />
+
+        <ion-button fill="clear" color="medium">
+          <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+        </ion-button>
+      </div>   
+    </ion-content>    
+  </ion-page>
+</template>   
+<script lang="ts">
+import Image from '@/components/Image.vue';
+
+import { defineComponent } from 'vue';
+import { mapGetters, useStore } from "vuex";
+import { useRouter } from 'vue-router';
+import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonSearchbar, IonItem, IonThumbnail, IonLabel, IonInput, IonChip, IonIcon, IonButton, IonCheckbox, IonSelect, IonSelectOption } from '@ionic/vue'
+import { ellipsisVerticalOutline, sendOutline } from 'ionicons/icons'
+export default defineComponent({
+    components: {
+      Image,
+      IonPage,
+      IonHeader,
+      IonToolbar,
+      IonBackButton,
+      IonTitle,
+      IonContent,
+      IonSearchbar,
+      IonItem,
+      IonThumbnail,
+      IonLabel,
+      IonInput,
+      IonChip,
+      IonIcon,
+      IonButton,
+      IonCheckbox,
+      IonSelect,
+      IonSelectOption
+    },
+    computed: {
+      ...mapGetters({
+        parsedCsv: 'order/getCsv',
+        getProduct: 'product/getProduct'
+      })
+    },
+    setup() {
+      const router = useRouter();
+      const store = useStore();
+      return {
+        ellipsisVerticalOutline,
+        sendOutline,
+        router,
+        store
+      }
+    }
+});
+
+</script>
+<style scoped>
+.header {
+  display: grid;
+  grid: "search filters"
+        /1fr 1fr;
+  grid-gap: 16px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.search {
+  grid-area: search;
+}
+
+.filters {
+  grid-area: filters;
+}
+.list-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue
index ae95dbb0..4a3803fd 100644
--- a/src/views/PurchaseOrder.vue
+++ b/src/views/PurchaseOrder.vue
@@ -20,25 +20,35 @@
           <ion-note>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-note>
           <ion-item>
               <ion-label>{{ $t("Order ID") }}</ion-label>
-              <ion-select placeholder="Select"></ion-select>
+              <ion-select v-if="content.length" placeholder="Select" v-model="orderIdField">
+                  <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
           </ion-item>
           <ion-item>
               <ion-label>{{ $t("Shopify product SKU") }}</ion-label>
-              <ion-select placeholder="Select"></ion-select>
+              <ion-select v-if="content.length" placeholder="Select" v-model="productSkuField">
+                  <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
           </ion-item>
           <ion-item>
               <ion-label>{{ $t("Shopify product UPC") }}</ion-label>
-              <ion-select placeholder="Select"></ion-select>
+              <ion-select v-if="content.length" placeholder="Select" v-model="productUpcField">
+                  <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
           </ion-item>
           <ion-item>
               <ion-label>{{ $t("Arrival date") }}</ion-label>
-              <ion-select placeholder="Select"></ion-select>
+              <ion-select v-if="content.length" placeholder="Select" v-model="dateField">
+                  <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
           </ion-item>
           <ion-item>
               <ion-label>{{ $t("Ordered quantity") }}</ion-label>
-              <ion-select placeholder="Select"></ion-select>
+              <ion-select v-if="content.length" placeholder="Select" v-model="quantityField">
+                  <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
+              </ion-select>
           </ion-item>
-          <ion-button color="dark" fill="solid" disabled="true" expand="block">{{ $t("REVIEW") }}</ion-button>
+          <ion-button color="dark" fill="solid" @click="mapFields" expand="block">{{ $t("REVIEW") }}</ion-button>
         </div>
       </div>     
     </ion-content>    
@@ -46,8 +56,10 @@
 </template>
 <script>
 import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonItem, IonLabel, IonNote, IonButton, IonSelect } from "@ionic/vue";
-import { defineComponent, ref } from "vue";
-import { parseCsv } from '@/utils'
+import { defineComponent } from "vue";
+import { useRouter } from 'vue-router';
+import { parseCsv } from '@/utils';
+import { useStore } from "vuex";
 export default defineComponent({
     name: " purchase orders",
     components: {
@@ -66,23 +78,70 @@ export default defineComponent({
     data() {
       return {
         file: "",
-        content:[]
+        content: [],
+        orderIdField: "",
+        productSkuField: "",
+        productUpcField: "",
+        dateField: "",
+        quantityField: "",
+        csvParsed: [],
+        csvObject: {
+          orderId: [],
+          shopifyproductSKU: [],
+          shopifyproductUPC: [],
+          arrivalDate: [],
+          quantityOrdered: []
+        }
       }
     },
     methods: {
       getFile(event) {
-        const file = ref(null);
         this.file = event.target.files[0];
         this.parseFile();
       },
       async parseFile(){
         await parseCsv(this.file).then(res => {
           this.content = res;
-          console.log(res);
         })
       },
-    },
-    
+      mapFields() {
+        this.csvParsed = [];
+        this.content.map(item => {
+          this.csvObject.orderId = item[this.orderIdField];
+          this.csvObject.shopifyproductSKU = item[this.productSkuField];
+          this.csvObject.shopifyproductUPC = item[this.productUpcField];
+          this.csvObject.arrivalDate = item[this.dateField];
+          this.csvObject.quantityOrdered = item[this.quantityField];
+          this.csvParsed.push(this.csvObject);            
+        })
+        this.store.dispatch("order/uploadCsv", this.csvParsed);
+        this.fetchProducts()
+        this.router.push({
+          name:'Purchase Order Detail'
+        })
+      },
+      async fetchProducts(vSize, vIndex) {
+        const productIds = this.csvParsed.map(item => {
+          return item.shopifyproductSKU
+        })
+        const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
+        const viewIndex = vIndex ? vIndex : 0;
+        const payload = {
+          viewSize,
+          viewIndex,
+          productIds
+        }
+        await this.store.dispatch("product/fetchProducts", payload);
+      },
+    }, 
+    setup(){
+    const router = useRouter();
+    const store = useStore();
+    return {
+      router,
+      store
+    }
+  } 
 })
 </script>   
 <style scoped>
@@ -96,6 +155,6 @@ export default defineComponent({
 }
 
 .info{
-    padding-top: 40px;
+  padding-top: 40px;
 }
 </style>
\ No newline at end of file