diff --git a/resources/assets/vue/components/settings/elements/AffiliateSectionComponent.vue b/resources/assets/vue/components/settings/elements/AffiliateSectionComponent.vue
new file mode 100644
index 00000000..3104f89c
--- /dev/null
+++ b/resources/assets/vue/components/settings/elements/AffiliateSectionComponent.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading('affiliateSettingsSection')"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading('affiliateSettingsSection')">
+                <div class="col">
+                    <!-- <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
+                        <div class="col">
+                            <div class="font-heading all-caps fs-10 hint-text">
+                                Settings
+                            </div>
+                        </div>
+                    </div> -->
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <affiliate-settings-component section="affiliateSettingsSection"></affiliate-settings-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30" v-show="!$store.getters.isLoading('affiliateSettingsSection')">
+                <div class="col">
+                    <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
+                        <div class="col">
+                            <div class="font-heading all-caps fs-10 hint-text">
+                                Affiliate Codes
+                            </div>
+                        </div>
+                        <div class="col-auto">
+                            <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
+                                <i class="fa fa-plus m-r-5"></i>
+                                New Code
+                            </button>
+                            <button class="btn btn-xs btn-outline-success" @click="refreshAffiliateCodes()">
+                                <i class="fa fa-refresh m-r-5"></i>
+                                Refresh
+                            </button>
+                            <modal-form-component section="affiliatesSection">
+                                <template slot="form" slot-scope="{section}">
+                                    <affiliate-form-component :section="section"></affiliate-form-component>
+                                </template>
+                            </modal-form-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-10 b-b p-b-5" style="border-color: #e0e0e0 !important;">
+                        <div class="col-2">
+                            <div class="font-heading all-caps fs-9 muted">Campaign</div>
+                        </div>
+                        <div class="col-4">
+                            <div class="font-heading all-caps fs-9 muted">Tracking Link</div>
+                        </div>
+                        <div class="col-3">
+                            <div class="row">
+                                <div class="col-4">
+                                    <div class="font-heading all-caps fs-9 muted">Clicks</div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="font-heading all-caps fs-9 muted">Registers</div>
+                                </div>
+                                <div class="col-4">
+                                    <div class="font-heading all-caps fs-9 muted">Orders</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-1">
+                            <div class="font-heading all-caps fs-9 muted">Status</div>
+                        </div>
+                        <div class="col-auto">
+                            <div class="font-heading all-caps fs-9 muted">Actions</div>
+                        </div>
+                    </div>
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <list-component section="affiliatesSection" :endpoint="route('api.affiliate.list')" :key="refreshKey">
+                                <template slot="list" slot-scope="{data}">
+                                    <affiliate-single-item-component section="affiliatesSection" :data="data"></affiliate-single-item-component>
+                                </template>
+                            </list-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                refreshKey: 1,
+            }
+        },
+        methods: {
+            refreshAffiliateCodes() {
+                this.refreshKey++;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/settings.blade.php b/resources/views/pages/settings.blade.php
index 91652a8c..659c916f 100644
--- a/resources/views/pages/settings.blade.php
+++ b/resources/views/pages/settings.blade.php
@@ -735,81 +735,7 @@
                         <template v-if="$store.getters.isSuperAdmin">
                             <div class="row tabsContainer hide tabContent" tab-name="affiliateSettings">
                                 <div class="col">
-                                    <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading('affiliateSettingsSection')"></loading-component>
-                                    <div class="row" v-show="!$store.getters.isLoading('affiliateSettingsSection')">
-                                        <div class="col">
-                                            <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
-                                                <div class="col">
-                                                    <div class="font-heading all-caps fs-10 hint-text">
-                                                        Settings
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="row m-b-20">
-                                                <div class="col">
-                                                    <affiliate-settings-component section="affiliateSettingsSection"></affiliate-settings-component>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row m-t-30" v-show="!$store.getters.isLoading('affiliateSettingsSection')">
-                                        <div class="col">
-                                            <div class="row p-b-5 m-b-20 b-b b-grey align-items-center parentContainer">
-                                                <div class="col">
-                                                    <div class="font-heading all-caps fs-10 hint-text">
-                                                        Affiliate Codes
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto">
-                                                    <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
-                                                        <i class="fa fa-plus m-r-5"></i>
-                                                        New Code
-                                                    </button>
-                                                    <modal-form-component section="affiliatesSection">
-                                                        <template slot="form" slot-scope="{section}">
-                                                            <affiliate-form-component :section="section"></affiliate-form-component>
-                                                        </template>
-                                                    </modal-form-component>
-                                                </div>
-                                            </div>
-                                            <div class="row m-b-10 b-b p-b-5" style="border-color: #e0e0e0 !important;">
-                                                <div class="col-2">
-                                                    <div class="font-heading all-caps fs-9 muted">Campaign</div>
-                                                </div>
-                                                <div class="col-4">
-                                                    <div class="font-heading all-caps fs-9 muted">Tracking Link</div>
-                                                </div>
-                                                <div class="col-3">
-                                                    <div class="row">
-                                                        <div class="col-4">
-                                                            <div class="font-heading all-caps fs-9 muted">Clicks</div>
-                                                        </div>
-                                                        <div class="col-4">
-                                                            <div class="font-heading all-caps fs-9 muted">Registers</div>
-                                                        </div>
-                                                        <div class="col-4">
-                                                            <div class="font-heading all-caps fs-9 muted">Orders</div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col-1">
-                                                    <div class="font-heading all-caps fs-9 muted">Status</div>
-                                                </div>
-                                                <div class="col-auto">
-                                                    <div class="font-heading all-caps fs-9 muted">Actions</div>
-                                                </div>
-                                            </div>
-                                            <div class="row m-b-20">
-                                                <div class="col">
-                                                    <list-component section="affiliatesSection" :endpoint="route('api.affiliate.list')">
-                                                        <template slot="list" slot-scope="{data}">
-                                                            <affiliate-single-item-component section="affiliatesSection" :data="data"></affiliate-single-item-component>
-                                                        </template>
-                                                    </list-component>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <affiliate-section-component section="affiliateSettingsSection"></affiliate-section-component>
                                 </div>
                             </div>
                         </template>