diff --git a/src/components/SelectOperatingCountriesModal.vue b/src/components/SelectOperatingCountriesModal.vue
new file mode 100644
index 0000000..5f5e249
--- /dev/null
+++ b/src/components/SelectOperatingCountriesModal.vue
@@ -0,0 +1,65 @@
+<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>{{ translate("Select operating countries") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-searchbar :placeholder="translate('Search country')"  />
+
+    <ion-list>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+    </ion-list>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="checkmarkOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { checkmarkOutline, closeOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+</script>
+
+<style scoped>
+  ion-content {
+    --padding-bottom: 80px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 598f678..f8e6a84 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,24 +1,109 @@
 {
+  "Add": "Add",
+  "Add configurations": "Add configurations",
   "App": "App",
+  "Approval": "Approval",
+  "Approve on import": "Approve on import",
+  "Auto approve orders": "Auto approve orders",
+  "Auto cancellations days": "Auto cancellations days",
+  "Auto order cancellation": "Auto order cancellation",
+  "Brokering": "Brokering",
   "Built:": "Built: {builtTime}",
+  "Cancel": "Cancel",
+  "Cancel order before fulfillment": "Cancel order before fulfillment",
+  "Cancellations": "Cancellations",
   "Change": "Change",
+  "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "Company name": "Company name",
+  "Configurations": "Configurations",
+  "Configure cancellation threshold for unfulfilled orders based on a specified number of days.": "Configure cancellation threshold for unfulfilled orders based on a specified number of days.",
+  "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.": "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.",
+  "Configure when no further order information is needed prior to order approval.": "Configure when no further order information is needed prior to order approval.",
+  "Confirm": "Confirm",
+  "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.",
+  "Create a new product store": "Create a new product store",
+  "Create deadline days": "Create deadline days",
+  "Create new product store": "Create new product store",
+  "Create new tag": "Create new tag",
+  "Create product store": "Create product store",
+  "Delivery address": "Delivery address",
+  "Delivery method": "Delivery method",
+  "Display current physical quantity expected at locations while inventory counting.": "Display current physical quantity expected at locations while inventory counting.",
+  "Edit": "Edit",
   "Fetching time zones": "Fetching time zones",
+  "Fulfillment": "Fulfillment",
+  "Global identifier": "Global identifier",
   "Go to OMS": "Go to OMS",
+  "Hold pre-order physical inventory": "Hold pre-order physical inventory",
+  "ID": "ID",
+  "Id prefix": "Id prefix",
+  "Identifier": "Identifier",
+  "Import": "Import",
+  "Inventory": "Inventory",
+  "Inventory reservation": "Inventory reservation",
+  "Inventory view": "Inventory view",
   "Login": "Login",
   "Logging in...": "Logging in...",
   "Logout": "Logout",
+  "Manage configurations": "Manage configurations",
+  "Minimum shipment threshold": "Minimum shipment threshold",
+  "Name": "Name",
+  "No product store found.": "No product store found.",
   "No time zone found": "No time zone found",
+  "Notifications": "Nofifications",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
+  "Operating countries": "Operating countries",
+  "Operating in": "Operating in",
+  "Order": "Order",
+  "Order brokering": "Order brokering",
+  "Order edit permissions": "Order edit permissions",
+  "Order splitting": "Order splitting",
+  "Orders tagged with this tag will undergo line item check for fulfillment facility selection.": "Orders tagged with this tag will undergo line item check for fulfillment facility selection.",
+  "Partial order rejection": "Partial order rejection",
   "Password": "Password",
+  "Pick up location": "Pick up location",
+  "Pre-order computation": "Pre-order computation",
+  "Pre-order group": "Pre-order group",
+  "Preferred identifier": "Preferred identifier",
+  "Preselected facility tag": "Preselected facility tag",
+  "Primary identifier": "Primary identifier",
+  "Product": "Product",
+  "Product Identifier": "Product Identifier",
+  "Product store": "Product store",
+  "Product store name": "Product store name",
+  "Product store represents a brand in OMS": "Product store represents a brand in OMS",
+  "Returns": "Returns",
+  "Re-route fulfillment": "Re-route fulfillment",
+  "Routing": "Routing",
+  "Save billing information": "Save billing information",
+  "Search country": "Search country",
   "Search time zones": "Search time zones",
+  "Seat Allocation": "Seat Allocation",
+  "Secondary identifier": "Secondary identifier",
+  "Select operating countries": "Select operating countries",
   "Select time zone": "Select time zone",
+  "Send notification to Shopify": "Send notification to Shopify",
   "Settings": "Settings",
+  "Setup product store": "Setup product store",
+  "Shipment method": "Shipment method",
+  "Shipping facility tag": "Shipping facility tag",
+  "Show systemic inventory": "Show systemic inventory",
+  "Specify any preferred prefix to be added to internal order IDs.": "Specify any preferred prefix to be added to internal order IDs.",
+  "Specify the number of days permitted for creating returns for in-store.": "Specify the number of days permitted for creating returns for in-store.",
+  "Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.": "Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.",
+  "Split orders into multiple groups and fulfill them from different fulfillment centers.": "Split orders into multiple groups and fulfill them from different fulfillment centers.",
+  "Store billing information associated with orders in OMS.": "Store billing information associated with orders in OMS.",
+  "Store pickup": "Store pickup",
+  "Tag will hold the preselected fulfillment facility value.": "Tag will hold the preselected fulfillment facility value.",
+  "The identifier used globally throughout the business operations.": "The identifier used globally throughout the business operations.",
+  "The name of the parent organization that owns all brands deployed on the OMS": "The name of the parent organization that owns all brands deployed on the OMS",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
   "Time zone updated successfully": "Time zone updated successfully",
   "Timezone": "Timezone",
+  "Update tracking information upon order shipment in Shopify.": "Update tracking information upon order shipment in Shopify.",
   "Username": "Username",
   "Version:": "Version: {appVersion}"  
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7a2c434..320631c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,9 @@ import { RouteRecordRaw } from "vue-router";
 import Login from "@/views/Login.vue"
 import store from "@/store"
 import Tabs from "@/views/Tabs.vue"
+import CreateProductStore from "@/views/CreateProductStore.vue";
+import AddConfigurations from "@/views/AddConfigurations.vue";
+import ProductStoreDetails from "@/views/ProductStoreDetails.vue";
 
 const authGuard = (to: any, from: any, next: any) => {
   if (store.getters["user/isAuthenticated"]) {
@@ -31,15 +34,37 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: "",
-        redirect: "/settings"
+        redirect: "/product-store"
+      },
+      {
+        path: "product-store",
+        name: "ProductStore",
+        component: () => import("@/views/ProductStore.vue")
       },
       {
         path: "settings",
+        name: "Settings",
         component: () => import("@/views/Settings.vue")
       }
     ],
     beforeEnter: authGuard
   },
+  {
+    path: "/create-product-store",
+    name: "CreateProductStore",
+    component: CreateProductStore
+  },
+  {
+    path: "/add-configurations",
+    name: "AddConfigurations",
+    component: AddConfigurations
+  },
+  {
+    path: "/product-store-details/:productStoreId",
+    name: "ProductStoreDetails",
+    component: ProductStoreDetails,
+    props: true
+  },
   {
     path: "/login",
     name: "Login",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index c4dafed..3a60b78 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -245,6 +245,11 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+body {
+  /** Border variable **/
+  --border-medium: 1px solid var(--ion-color-medium);
+}
+
 .empty-state {
   max-width: 100%;
   display: flex;
diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
new file mode 100644
index 0000000..6272da0
--- /dev/null
+++ b/src/views/AddConfigurations.vue
@@ -0,0 +1,73 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/tabs/create-product-store" slot="start"></ion-back-button>
+        <ion-title>{{ translate("Add configurations") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button slot="icon-only">
+            <ion-icon :icon="informationCircleOutline" />
+          </ion-button>
+        </ion-buttons>
+        <ion-progress-bar value="0.75" />
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <h1 class="ion-margin-start">{{ translate('Configurations') }}</h1>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>{{ translate("Product") }}</ion-label>
+          </ion-list-header>
+          
+          <ion-item>
+            <ion-icon slot="start" :icon="shirtOutline"/>
+            <ion-select interface="popover" :label="translate('Product Identifier')" value="sku">
+              <ion-select-option value="sku">{{ "SKU" }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          
+          <ion-list-header>
+            <ion-label>{{ translate("Order") }}</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-toggle>{{ translate("Auto approve orders") }}</ion-toggle>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-input label-placement="floating" label="Sales order ID prefix" helper-text="Add a custom prefix to HotWax order IDs: <inputValue>10001" />
+          </ion-item>
+        </ion-list>
+
+        <ion-button class="ion-margin-top" @click="setupProductStore()">
+          {{ translate("Setup product store") }}
+          <ion-icon slot="end" :icon="arrowForwardOutline"/>
+        </ion-button>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonProgressBar, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
+import { arrowForwardOutline, informationCircleOutline, shirtOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function setupProductStore() {
+  router.push("/product-store-details")
+}
+</script>
+
+<style scoped>
+  @media (min-width: 700px) {
+    main {
+      max-width: 375px;
+      margin: auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
new file mode 100644
index 0000000..834bf25
--- /dev/null
+++ b/src/views/CreateProductStore.vue
@@ -0,0 +1,80 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/tabs/product-store" slot="start"></ion-back-button>
+        <ion-title>{{ translate("Create product store") }}</ion-title>
+        <ion-progress-bar value="0.25" />
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <h1 class="ion-margin-start">{{ translate('Create a new product store') }}</h1>
+
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Company name')" :helper-text="translate('The name of the parent organization that owns all brands deployed on the OMS')" :clear-input="true" />
+        </ion-item>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Name')" :helper-text="translate('Product store represents a brand in OMS')" :clear-input="true" />
+        </ion-item>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('ID')" :helper-text="translate('Product store represents a brand in OMS')" :clear-input="true" />
+        </ion-item>
+
+        <ion-item>
+          <ion-icon slot="start" :icon="mapOutline"/>
+          <ion-label>{{ translate("Operating countries") }}</ion-label>
+          <ion-button fill="outline" slot="end" @click="openSelectOperatingCountriesModal()">{{ translate("Add") }}</ion-button>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-chip outline>
+            {{ "<countryName>" }}
+            <ion-icon :icon="closeCircleOutline" />
+          </ion-chip>
+          <ion-chip outline>
+            {{ "<countryName>" }}
+            <ion-icon :icon="closeCircleOutline" />
+          </ion-chip>
+        </ion-item>
+
+        <ion-button class="ion-margin-top" @click="manageConfigurations()">
+          {{ translate("Manage configurations") }}
+          <ion-icon slot="end" :icon="arrowForwardOutline"/>
+        </ion-button>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonProgressBar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { arrowForwardOutline, closeCircleOutline, mapOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+import SelectOperatingCountriesModal from "@/components/SelectOperatingCountriesModal.vue";
+
+const router = useRouter();
+
+function manageConfigurations() {
+  router.push("/add-configurations")
+}
+
+async function openSelectOperatingCountriesModal() {
+  const modal = await modalController.create({
+    component: SelectOperatingCountriesModal
+  })
+
+  modal.present()
+}
+</script>
+
+<style scoped>
+  @media (min-width: 700px) {
+    main {
+      max-width: 375px;
+      margin: auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/ProductStore.vue b/src/views/ProductStore.vue
new file mode 100644
index 0000000..7bbc8d6
--- /dev/null
+++ b/src/views/ProductStore.vue
@@ -0,0 +1,71 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ translate("Product store") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <div class="list-item">
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="storefrontOutline" />
+            <ion-label class="ion-text-wrap">
+              <p class="overline">{{ "PRODUCT STORE ID" }}</p>
+              {{ "Product store name" }}
+            </ion-label>
+          </ion-item>
+
+          <div class="tablet">
+            <ion-chip outline>
+              <ion-label>{{ "<count> facilities" }}</ion-label>
+              <ion-icon :icon="openOutline" />
+            </ion-chip>
+          </div>
+
+          <div class="tablet">
+            <ion-chip outline>
+              <ion-label>{{ "<count> shipping methods" }}</ion-label>
+            </ion-chip>
+          </div>
+        </div>
+
+        <div class="ion-text-center ion-margin">
+          <ion-button fill="outline" @click="createStore()">
+            <ion-icon slot="start" :icon="addOutline"/>
+            {{ translate("Create new product store") }}
+          </ion-button>
+        </div>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { addOutline, openOutline, storefrontOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function createStore() {
+  router.push("/create-product-store")
+}
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 4;
+  border-bottom: var(--border-medium);
+}
+
+.list-item > ion-item {
+  width: 100%
+}
+
+main {
+  margin: var(--spacer-lg);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ProductStoreDetails.vue b/src/views/ProductStoreDetails.vue
new file mode 100644
index 0000000..0cfd279
--- /dev/null
+++ b/src/views/ProductStoreDetails.vue
@@ -0,0 +1,410 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/tabs/product-store"/>
+        <ion-title>{{ "<productStoreName>" }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <div class="store-info">
+          <ion-card class="store-info store-details">
+            <ion-item lines="none" class="ion-margin-top">
+              <ion-label>
+                <p class="overline">{{ "PRODUCT STORE ID" }}</p>
+                <h1>{{ "Product store name" }}</h1>
+                <p>{{ "Company name" }}</p>
+              </ion-label>
+              <ion-button fill="outline" @click="renameProductStore()">{{ translate("Edit") }}</ion-button>
+            </ion-item>
+
+            <div class="ion-margin-top">
+              <ion-item>
+                <ion-icon :icon="mapOutline" slot="start"/>
+                <ion-select :label="translate('Operating in')" value="countries" interface="popover">
+                  <ion-select-option value="countries">{{ "3 countries" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-icon :icon="thunderstormOutline" slot="start"/>
+                <ion-toggle>{{ translate("Order brokering") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-icon :icon="wineOutline" slot="start"/>
+                <ion-toggle>{{ translate("Inventory reservation") }}</ion-toggle>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Order") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Import") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-input :label="translate('Id prefix')" placeholder="<prefixValue>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Specify any preferred prefix to be added to internal order IDs.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Save billing information") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Store billing information associated with orders in OMS.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Approval") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Approve on import") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Configure when no further order information is needed prior to order approval.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Returns") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-input :label="translate('Create deadline days')" placeholder="<days count>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Specify the number of days permitted for creating returns for in-store.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Brokering") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Seat Allocation") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-label>{{ translate("Preselected facility tag") }}</ion-label>
+                <ion-button fill="clear" @click="createUpdateTag()">
+                  <ion-icon slot="icon-only" :icon="addCircleOutline" />
+                </ion-button>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Orders tagged with this tag will undergo line item check for fulfillment facility selection.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>{{ translate("Shipping facility tag") }}</ion-label>
+                <ion-chip outline @click="createUpdateTag()">{{ "<tagName>" }}</ion-chip>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Tag will hold the preselected fulfillment facility value.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Routing") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Order splitting") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-input :label="translate('Minimum shipment threshold')" placeholder="<value>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Split orders into multiple groups and fulfill them from different fulfillment centers.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <div>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Fulfillment") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-list>
+                <ion-item-divider color="light">
+                  <ion-label>{{ translate("Notifications") }}</ion-label>
+                </ion-item-divider>
+  
+                <ion-item>
+                  <ion-toggle>{{ translate("Send notification to Shopify") }}</ion-toggle>
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Update tracking information upon order shipment in Shopify.") }}</p>
+                  </ion-label>
+                </ion-item>
+
+                <ion-item-divider color="light">
+                  <ion-label>{{ translate("Cancellations") }}</ion-label>
+                </ion-item-divider>
+
+                <ion-item>
+                  <ion-toggle>{{ translate("Auto order cancellation") }}</ion-toggle>
+                </ion-item>
+  
+                <ion-item>
+                  <ion-input :label="translate('Auto cancellations days')" placeholder="<days count>" />
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Configure cancellation threshold for unfulfilled orders based on a specified number of days.") }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </ion-card>
+
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Store pickup") }}</ion-card-title>
+              </ion-card-header>
+
+              <ion-list>
+                <ion-item>
+                  <ion-toggle>{{ translate("Partial order rejection") }}</ion-toggle>
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.") }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </ion-card>
+          </div>
+        </section>
+
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Inventory") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Inventory view") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Show systemic inventory") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Display current physical quantity expected at locations while inventory counting.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Pre-order computation") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Hold pre-order physical inventory") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Pre-order group')" interface="popover" value="">
+                  <ion-select-option value="">{{ "<facilityGroup>" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ translate("Product") }}</ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Identifier") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-select :label="translate('Global identifier')" interface="popover" value="">
+                  <ion-select-option value="">{{ "<UPCA>" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("The identifier used globally throughout the business operations.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Preferred identifier") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-select :label="translate('Primary identifier')" interface="popover" value="">
+                  <ion-select-option value="">{{ "Product Id" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Secondary identifier')" interface="popover" value="">
+                  <ion-select-option value="">{{ "SKU" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Choosing a product identifier allows you to view products with your preferred identifiers.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ translate("Re-route fulfillment") }}</ion-card-subtitle>
+                <ion-card-title>{{ translate("Order edit permissions") }}</ion-card-title>
+              </div>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item>
+                <ion-toggle>{{ translate("Delivery method") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Shipment method')" interface="popover" value="">
+                  <ion-select-option value="">{{ "Two day" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Delivery address") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Pick up location") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Cancel order before fulfillment") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+        </section>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonChip, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, alertController } from "@ionic/vue";
+import { addCircleOutline, mapOutline, thunderstormOutline, wineOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+async function renameProductStore() {
+  const alert = await alertController.create({
+    header: translate("Product store name"),
+    inputs: [{
+      name: "storeName"
+    }],
+    buttons: [{
+      text: translate("Cancel"),
+      role: "cancel"
+    },
+    {
+      text: translate("Confirm")
+    }]
+  })
+
+  await alert.present()
+}
+
+async function createUpdateTag() {
+  const alert = await alertController.create({
+    header: translate("Create new tag"),
+    inputs: [{
+      name: "storeName"
+    }],
+    buttons: [{
+      text: translate("Cancel"),
+      role: "cancel"
+    },
+    {
+      text: translate("Add")
+    }]
+  })
+
+  await alert.present()
+}
+</script>
+
+<style scoped>
+section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start;
+}
+
+.store-details {
+  grid-column: span 2;
+}
+
+ion-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.store-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start; 
+}
+
+@media screen and (min-width: 700px) {
+  ion-content > main {
+    margin: var(--spacer-lg)
+  }
+}
+</style>
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index 95e568e..cbbdb82 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -3,6 +3,10 @@
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom" v-if="showFooter()">
+        <ion-tab-button tab="store" href="/tabs/product-store">
+          <ion-icon :icon="storefrontOutline" />
+          <ion-label>{{ translate("Product store") }}</ion-label>
+        </ion-tab-button>
         <ion-tab-button tab="more" href="/tabs/settings">
           <ion-icon :icon="settingsOutline" />
           <ion-label>{{ translate("Settings") }}</ion-label>
@@ -15,13 +19,13 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
-import { settingsOutline } from "ionicons/icons";
+import { settingsOutline, storefrontOutline } from "ionicons/icons";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 function showFooter() {
-  if (['/tabs/settings'].includes(router.currentRoute.value.path)) return true
+  if (['/tabs/product-store', '/tabs/settings'].includes(router.currentRoute.value.path)) return true
   return false
 }
 </script>