diff --git a/src/components/OmsModal.vue b/src/components/OmsModal.vue
new file mode 100644
index 0000000..6ee801d
--- /dev/null
+++ b/src/components/OmsModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ $t("OMS Name") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item lines="none">
+      <ion-label class="ion-text-wrap">
+        {{ $t('The OMS instance name is the string that comes right before your OMS domain. For example, if your URL looks like this: "https://notnaked-oms.hotwax.io", then your OMS name is "notnaked-oms".') }}
+        <br /><br />{{ $t('To access UAT environments, replace "oms" with "uat". The UAT name for this example store would be "notnaked-uat".') }}
+      </ion-label>
+    </ion-item>
+  </ion-content>
+</template>
+
+<script>
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline } from "ionicons/icons";
+
+export default defineComponent({
+  name: "OmsModal",
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+  },
+  setup() {
+    return {
+      closeOutline
+    };
+  },
+});
+</script>
diff --git a/src/views/ShopifyInstall.vue b/src/views/ShopifyInstall.vue
index 86837c5..40c0485 100644
--- a/src/views/ShopifyInstall.vue
+++ b/src/views/ShopifyInstall.vue
@@ -4,13 +4,52 @@
       <div class="install" v-if="!loader || !session || !code || !shop">
         <ion-list>
           <Logo />
-          <ion-item lines="none">
-            <ion-label class="ion-text-wrap">{{ $t('Checkout our app on the app store!') }}</ion-label>
-            <ion-button fill="clear" @click="goToShopifyAppStore()">
-              {{ $t('View app') }}
-              <ion-icon :icon="openOutline" />
-            </ion-button>
+          <ion-item lines="none" class="ion-margin-vertical" v-if="authenticationInProgress">
+            <ion-icon slot="start" :icon="cloudDownloadOutline" />
+            <ion-label class="ion-text-wrap">
+              {{ $t('Installing HotWax Commerce onto your Shopify store...') }}
+              <p>{{ $t("You'll be auto redirected to your Shopify store to complete the installation process") }}</p>
+            </ion-label>
+          </ion-item>
+          <ion-item lines="none" class="ion-margin-vertical" v-else-if="syncDetailsToShopify || isAppInstalled">
+            <ion-icon slot="start" color="success" :icon="checkmarkCircleOutline" />
+            <ion-label class="ion-text-wrap">
+              {{ $t('HotWax Commerce is installed on your Shopify store') }}
+              <p>{{ shop }}</p>
+            </ion-label>
+          </ion-item>
+          <ion-progress-bar type="indeterminate" v-if="authenticationInProgress"></ion-progress-bar>
+          <ion-item lines="none" class="ion-margin-vertical" :disabled="authenticationInProgress" v-if="syncDetailsToShopify || isAppInstalled">
+            <ion-icon slot="start" :icon="cloudUploadOutline" />
+            <ion-label class="ion-text-wrap" v-if="syncDetailsToShopify">{{ $t('Syncing Shopify store to HotWax Commerce') }}</ion-label>
+            <ion-label class="ion-text-wrap" v-if="isAppInstalled">{{ $t('Shopify store synced with HotWax Commerce') }}</ion-label>
+          </ion-item>
+          <ion-progress-bar type="indeterminate" v-if="syncDetailsToShopify"></ion-progress-bar>
+          <ion-item class="ion-item-button ion-margin-vertical" lines="none" button @click="goToLearnMoreDocument()">
+            <ion-icon slot="start" :icon="bookOutline" />
+            <ion-label class="ion-text-wrap">{{ $t('Learn more about connecting HotWax Commerce with Shopify') }}</ion-label>
           </ion-item>
+
+          <template v-if="isAppInstalled">
+            <ion-item>
+              <ion-label>{{ $t("OMS") }}</ion-label>
+              <ion-input v-model="instanceAddress" :placeholder="$t('notnaked-oms')" @change="isConfigUpdated = false"></ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-label>{{ $t("JWT Token") }}</ion-label>
+              <ion-input :placeholder="$t('notnaked-oms')" type="password" v-model="instanceToken" @change="isConfigUpdated = false"></ion-input>
+            </ion-item>
+            <ion-button :disabled="!instanceAddress || !instanceToken" expand="block" @click="updateConnectConfig" color="dark">
+              <ion-label>{{ $t("Finish Setup") }}</ion-label>
+              <ion-icon slot="end" :icon="arrowForwardOutline" />
+            </ion-button>
+            <ion-item button detail lines="none" @click="openOmsModal">
+              <ion-label>{{ $t("Find your OMS name") }}</ion-label>
+            </ion-item>
+            <ion-item detail lines="none">
+              <ion-label class="ion-text-wrap">{{ $t("Don't have a HotWax Commerce account? Contact Us") }}</ion-label>
+            </ion-item>
+          </template>
         </ion-list>
       </div>
     </ion-content>
@@ -22,20 +61,24 @@ import {
   IonButton,
   IonContent,
   IonIcon,
+  IonInput,
   IonItem,
   IonLabel,
   IonList,
   IonPage,
+  IonProgressBar,
+  modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { hasError, showToast } from "@/utils";
 import { useRouter } from "vue-router";
-import { generateAccessToken, getApiKey, verifyRequest } from "@/services"
-import { useStore } from "vuex";
+import { generateAccessToken, getApiKey, setConfiguration, verifyRequest } from "@/services"
+import { mapGetters, useStore } from "vuex";
 import Logo from '@/components/Logo.vue';
 import { loadingController } from '@ionic/vue';
-import { openOutline } from 'ionicons/icons'
+import { arrowForwardOutline, bookOutline, checkmarkCircleOutline, closeCircleOutline, cloudDownloadOutline, cloudUploadOutline } from 'ionicons/icons'
 import { translate } from "@/i18n";
+import OmsModal from "@/components/OmsModal.vue";
 
 export default defineComponent({
   name: "ShopifyInstall",
@@ -43,16 +86,18 @@ export default defineComponent({
     IonButton,
     IonContent,
     IonIcon,
+    IonInput,
     IonItem,
     IonLabel,
     IonList,
     IonPage,
+    IonProgressBar,
     Logo
   },
   data() {
     return {
       loader: null as any,
-      apiKey: 'ec8cec8c4299d0ea17269da567eebc28',
+      apiKey: '61a49df39017a4481e2aaf633900cea9',
       session: this.$route.query['session'],
       hmac: this.$route.query['hmac'],
       shop: this.$route.query['shop'],
@@ -62,14 +107,26 @@ export default defineComponent({
       code: this.$route.query['code'],
       state: this.$route.query['state'],
       embedded: this.$route.query['embedded'],
-      scopes: ''
+      scopes: '',
+      authenticationInProgress: false,
+      isAppInstalled: false,
+      syncDetailsToShopify: false,
+      instanceAddress: '',
+      instanceToken: '',
+      isConfigUpdated: false,
+      payload: {}
     };
   },
+  computed: {
+    ...mapGetters({
+      connectConfig: 'shop/getConfig'
+    })
+  },
   async mounted() {
-    await this.presentLoader();
     const shop: string = this.shop as string
 
     if (this.session) {
+      this.syncDetailsToShopify = true;
       const apiKey = await this.getApiKey(shop);
       if (apiKey) {
         try {
@@ -82,7 +139,6 @@ export default defineComponent({
             if(this.scopes) {
               await this.authorise(shop, undefined, false);
             } else {
-              this.dismissLoader();
               showToast(translate("Failed to get the access scopes"))
               console.error('Failed to get the access scopes')
               return;
@@ -92,35 +148,50 @@ export default defineComponent({
             window.location.replace(resp.instanceAddress)
           } else {
             console.error('Failed to fetch the instance details')
+            this.isAppInstalled = true;
+            this.syncDetailsToShopify = false;
             let query = this.$route.fullPath.split("?")[1]
             if(!query.includes('clientId')) {
               query += `&clientId=${apiKey}`
             }
-            this.$router.push(`/configure?${query}`);
+
+            this.payload = query ? query.split('&').reduce((params: any, param) => {
+              const [key, value] = param.split('=')
+              params[key] = value
+              return params;
+            }, {}) : {}
+
+            if(!Object.keys(this.payload).length) {
+              this.router.push('/')
+            }
           }
         } catch(err: any) {
-          this.dismissLoader();
+          this.isAppInstalled = false;
+          this.syncDetailsToShopify = false;
           showToast(translate("Failed to verify the request, please try again"))
           console.error('error', err)
           return;
         }
       } else {
         console.error('Api key not found')
+        this.isAppInstalled = false;
+        this.syncDetailsToShopify = false;
+        showToast(translate("Failed to verify the request, please try again"))
         this.router.push('/')
       }
     } else if (this.code) {
-      this.loader.message = "Verifying request..."
+      this.syncDetailsToShopify = true;
       const nonce = localStorage.getItem('nonce')
 
       if(nonce !== this.state) {
-        console.error('Failed to authenticate the redirect request')
+        this.syncDetailsToShopify = false;
         this.router.push('/')
         return;
       }
 
       const apiKey = await this.getApiKey(shop);
       if (apiKey) {
-        this.loader.message = "Fetching token..."
+        // this.loader.message = "Fetching token..."
         const payload = this.getQueryParams()
 
         try {
@@ -137,6 +208,7 @@ export default defineComponent({
             throw resp.data
           }
         } catch(err) {
+          this.syncDetailsToShopify = false;
           showToast(translate('Failed to fetch the token'))
           console.error('err', err)
         }
@@ -144,8 +216,8 @@ export default defineComponent({
         showToast(translate('Failed to find the api key'))
         console.error('Api key not found')
         this.router.push('/')
+        this.syncDetailsToShopify = false;
       }
-      this.dismissLoader()
     } else if (this.shop || this.host) {
       const query = JSON.parse(JSON.stringify(this.$route.query))
       if (this.embedded === "1") {
@@ -156,26 +228,25 @@ export default defineComponent({
         const redirectUri = process.env.VUE_APP_SHOPIFY_REDIRECT_URI;
         const url = new URL(decodeURIComponent(shop.startsWith("https") ? shop : `https://${shop}/`));
         if (url.hostname === location.hostname) {
-          const apiKey = await this.getApiKey(shop);
+          await this.getApiKey(shop);
           // Check why this condition is required
         } else {
           // TODO Remove this. Fallback
           window.location.assign(redirectUri + "?" + updatedQuery);
         }
       } else {
+        this.authenticationInProgress = true
         // Using await as if not used then the loader gets dismissed
         await this.authorise(shop, this.host);
       }
-      this.dismissLoader()
     }
-    this.dismissLoader()
   },
   methods: {
     async verifyRequest() {
       try {
         const payload = this.getQueryParams()
 
-        this.loader.message = "Verifying request..."
+        // this.loader.message = "Verifying request..."
         const resp = await verifyRequest({
           ...payload,
           clientId: this.apiKey
@@ -191,23 +262,19 @@ export default defineComponent({
       }
     },
     async authorise(shop: any, host: any, verify = true) {
-      await this.presentLoader();
-
       if(verify) {
         try {
           // Only checking whether the request is valid or not, not checking for the requestAuthorizationCode
-          const resp = await this.verifyRequest();
+          const resp = await this.verifyRequest() as any;
           this.scopes = resp.scopes;
         } catch(err: any) {
-          this.dismissLoader();
           showToast(translate("Failed to verify the request, please try again"))
           console.error('error', err)
+          this.authenticationInProgress = false
           return;
         }
       }
 
-      this.loader.message = "Redirecting..."
-
       const redirectUri = process.env.VUE_APP_SHOPIFY_REDIRECT_URI;
       const apiKey = await this.getApiKey(shop);
       if (apiKey && this.scopes) {
@@ -221,11 +288,11 @@ export default defineComponent({
         if(!this.scopes) {
           message = 'Access scopes not found'
         }
+        this.authenticationInProgress = false
         console.error(message)
         showToast(translate(message))
         this.router.push('/')
       }
-      this.dismissLoader();
     },
     async getApiKey(shop: string) {
       let apiKey = this.apiKey;
@@ -278,8 +345,38 @@ export default defineComponent({
         return params;
       }, {}) : {}
     },
-    goToShopifyAppStore() {
-      window.location.assign('https://apps.shopify.com/hotwax-order-management')
+    async goToLearnMoreDocument() { 
+      await this.presentLoader();
+      this.loader.message = "Redirecting..."
+      window.location.assign('https://docs.hotwax.co/documents/v/learn-shopify/setup-shopify/shopifyintegration')
+      this.dismissLoader();
+    },
+    async updateConnectConfig() {
+      try {
+        const resp = await setConfiguration(this.payload, {
+          'instanceAddress': this.instanceAddress,
+          'instanceToken': this.instanceToken
+        })
+        // TODO Update specific payload
+        if (resp.status === 200 && !hasError(resp)) {
+          showToast(translate('HotWax Commerce connection settings updated'))
+          this.isConfigUpdated = true
+          window.location.replace(this.instanceAddress)
+        } else {
+          throw resp.data
+        }
+      } catch(error){
+        console.error(error)
+        showToast(translate("Something went wrong"));
+        this.isConfigUpdated = false
+      }
+    },
+    async openOmsModal() {
+      const omsModal = await modalController.create({
+        component: OmsModal
+      });
+
+      omsModal.present();
     }
   },
   ionViewWillLeave() {
@@ -289,7 +386,12 @@ export default defineComponent({
     const store = useStore();
     const router = useRouter();
     return {
-      openOutline,
+      arrowForwardOutline,
+      bookOutline,
+      checkmarkCircleOutline,
+      closeCircleOutline,
+      cloudDownloadOutline,
+      cloudUploadOutline,
       router,
       store,
       showToast,
@@ -309,4 +411,9 @@ export default defineComponent({
 ion-list {
   max-width: 375px;
 }
+
+.ion-item-button::part(native) {
+  background-color: #F5F6F9;
+  border-radius: 20px;
+}
 </style>
\ No newline at end of file