diff --git a/resources/assets/vue/components/segments/elements/SegmentCompanyComponent.vue b/resources/assets/vue/components/segments/elements/SegmentCompanyComponent.vue
new file mode 100644
index 00000000..979a4321
--- /dev/null
+++ b/resources/assets/vue/components/segments/elements/SegmentCompanyComponent.vue
@@ -0,0 +1,115 @@
+<template>
+    <div class="w-100">
+        <validation-wrapper-component
+            selectable
+            :validator="$v.parameters.type"
+        >
+            <label>Segment</label>
+            <selectable-component
+                :endpoint="
+                    route('api.segment.list') + `?filters={%22type%22:${type}}`
+                "
+                :section="section"
+                valueColumn="id"
+                :labelColumn="['name']"
+                v-model="parameters.type"
+                @input="onSelect"
+            ></selectable-component>
+        </validation-wrapper-component>
+        <list-component
+            v-if="segmentId"
+            class="mt-4"
+            :key="segmentId"
+            :section="`segments_${segmentId}`"
+            :endpoint="route('api.company.list')"
+            :options="{
+                segments_in: [segmentId],
+                with_total_payments: true,
+                recency: '2022-02-15',
+                frequency: 15,
+                business_type: 2,
+                with_bookings: true,
+                order_by: { column: 'total_payments', DESC: true },
+            }"
+        >
+            <template slot="list" slot-scope="{ data }">
+                <company-component :data="data"></company-component>
+            </template>
+        </list-component>
+        <div v-else>
+            <div
+                class="row align-items-center justify-content-center p-t-50 p-b-50"
+                style=""
+            >
+                <div class="col-10">
+                    <div
+                        class="row align-items-center justify-content-center hint-text"
+                    >
+                        <div class="col-4 hint-text">
+                            <img
+                                src="/images/2829248.png"
+                                class="w-100 hint-text"
+                            />
+                        </div>
+                    </div>
+                    <div class="row text-center">
+                        <div class="col">
+                            <div class="row m-t-20">
+                                <div class="col">
+                                    <p
+                                        class="all-caps no-margin fs-11"
+                                        style="letter-spacing: 2px"
+                                    >
+                                        Please Select a Segment
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import componentHandler from "../../../general/mixins/componentHandler";
+export default {
+    props: {
+        section: {
+            type: String,
+            required: true,
+        },
+        type: {
+            type: Number,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            parameters: {
+                type: null,
+            },
+            segmentId: null,
+        };
+    },
+    validations: {
+        parameters: {
+            type: {},
+        },
+    },
+    methods: {
+        onSelect(val) {
+            this.segmentId = val;
+        },
+    },
+    watch: {
+        segmentId(newVal, oldVal) {
+            if (newVal !== oldVal) {
+                // console.log(newVal, oldVal);
+            }
+        },
+    },
+    mixins: [componentHandler],
+};
+</script>
diff --git a/resources/views/pages/segments/_tabs.blade.php b/resources/views/pages/segments/_tabs.blade.php
new file mode 100644
index 00000000..e422494a
--- /dev/null
+++ b/resources/views/pages/segments/_tabs.blade.php
@@ -0,0 +1,134 @@
+<div class="row">
+    <div class="col b-r b-white">
+        <div class="row fs-12 text-center">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="segment1">
+                <div class="row justify-content-center m-b-5">
+                    <div class="col-auto">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">
+                            <defs>
+                                <linearGradient x1="66.87575" y1="36.02325" x2="66.87575" y2="164.11756" gradientUnits="userSpaceOnUse" id="color-1_hUqtl21qkZmg_gr1">
+                                    <stop offset="0" stop-color="#009add"></stop>
+                                    <stop offset="1" stop-color="#00baa4"></stop>
+                                </linearGradient>
+                                <linearGradient x1="105.12425" y1="35.4535" x2="105.12425" y2="164.77331" gradientUnits="userSpaceOnUse" id="color-2_hUqtl21qkZmg_gr2">
+                                    <stop offset="0" stop-color="#009add"></stop>
+                                    <stop offset="1" stop-color="#00baa4"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="130.00781" x2="86" y2="146.81275" gradientUnits="userSpaceOnUse" id="color-3_hUqtl21qkZmg_gr3">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="2.6875" x2="86" y2="163.9375" gradientUnits="userSpaceOnUse" id="color-4_hUqtl21qkZmg_gr4">
+                                    <stop offset="0" stop-color="#009add"></stop>
+                                    <stop offset="1" stop-color="#00baa4"></stop>
+                                </linearGradient>
+                            </defs>
+                            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                                <path d="M0,172v-172h172v172z" fill="none"></path>
+                                <g>
+                                    <path d="M73.43863,107.5c-3.30294,0 -6.03075,2.40531 -6.48763,5.53087h-0.1505c-0.45687,-3.12556 -3.182,-5.53087 -6.48763,-5.53087c-3.62544,0 -6.56287,2.88906 -6.56287,6.45269c0,7.2885 6.78325,12.19856 10.59681,14.37812c1.55606,0.88956 3.49913,0.88956 5.05519,0c3.81625,-2.18225 10.59681,-7.08962 10.59681,-14.37812c0,-3.56363 -2.93744,-6.45269 -6.56019,-6.45269z" fill="url(#color-1_hUqtl21qkZmg_gr1)"></path>
+                                    <path d="M111.68713,107.5c-3.30294,0 -6.03075,2.40531 -6.48762,5.53087h-0.1505c-0.45419,-3.12556 -3.182,-5.53087 -6.48763,-5.53087c-3.62275,0 -6.56288,2.88906 -6.56288,6.45269c0,7.2885 6.78325,12.19856 10.59681,14.37813c1.55606,0.88956 3.49913,0.88956 5.05519,0c3.81625,-2.17956 10.5995,-7.08694 10.5995,-14.37812c0,-3.56363 -2.93744,-6.45269 -6.56288,-6.45269z" fill="url(#color-2_hUqtl21qkZmg_gr2)"></path>
+                                    <path d="M75.25,134.375c0,5.93669 4.81331,10.75 10.75,10.75c5.93669,0 10.75,-4.81331 10.75,-10.75v-2.6875h-21.5z" fill="url(#color-3_hUqtl21qkZmg_gr3)"></path>
+                                    <path d="M139.75,95.90344v-6.74831c0.02956,-0.15856 0.09406,-0.301 0.09406,-0.46762l-0.00806,-22.12619c0.2795,-14.89412 -7.39331,-27.3695 -10.70431,-32.04038c-5.54431,-7.80719 -11.05906,-11.73631 -13.83525,-12.08569c-1.06156,-0.12362 -2.11775,0.387 -2.65794,1.31688l-1.14487,1.97262c-0.97019,1.67431 -2.71169,2.67406 -4.65475,2.67406c-1.94306,0 -3.68994,-0.99975 -4.66012,-2.67406l-11.98625,-20.63194c-0.87613,-1.505 -2.44563,-2.40531 -4.1925,-2.40531c-1.74956,0 -3.31906,0.90031 -4.18981,2.408l-11.94056,20.54863c-0.97019,1.67431 -2.71169,2.67406 -4.65475,2.67406c-1.94306,0 -3.68994,-0.99975 -4.66281,-2.67406l-1.16906,-2.01025c-0.42463,-0.73369 -1.17712,-1.2255 -2.021,-1.31956c-2.64181,-0.3225 -7.47662,3.06375 -11.86531,8.38231c-6.26456,7.60025 -13.01019,20.86575 -13.15262,35.31375l-0.09406,22.66638c0,0 0,0 0,0.00269c0,0.00269 0,0.00538 0,0.00806v7.21594c-6.34519,3.02881 -10.75,9.48687 -10.75,16.97156c0,10.37106 8.44144,18.8125 18.8125,18.8125h0.12362c6.64888,18.77487 24.51,32.25 45.56388,32.25c21.05388,0 38.915,-13.47513 45.56388,-32.25h0.12363c10.37106,0 18.8125,-8.44144 18.8125,-18.8125c0,-7.48469 -4.40481,-13.94275 -10.75,-16.97156zM49.6435,34.11513c2.7735,-3.36475 4.94769,-5.02025 6.24038,-5.80769l0.0215,0.03762c1.94844,3.34863 5.42875,5.34813 9.3095,5.34813c3.88344,0 7.36106,-1.9995 9.30412,-5.35081l11.481,-19.76388l11.52669,19.84719c1.94844,3.34863 5.42875,5.34813 9.3095,5.34813c3.82969,0 7.267,-1.94844 9.22619,-5.21375c1.83019,1.20937 5.01756,3.90763 8.686,9.07031c2.28975,3.23038 9.59975,14.61463 9.69919,27.93119c-8.66719,-18.07881 -27.09538,-30.62406 -48.44756,-30.62406c-21.16406,0 -39.45788,12.32487 -48.21644,30.14838c0.4085,-12.65544 6.321,-24.252 11.85994,-30.97075zM26.875,112.875c0,-6.48763 4.62519,-11.91637 10.75,-13.16606v5.59806c-3.12556,1.10994 -5.375,4.0635 -5.375,7.568c0,3.59856 2.37306,6.60856 5.62763,7.64594c0.19619,1.91887 0.53481,3.79206 0.94869,5.64106c-6.70263,-0.74981 -11.95131,-6.3855 -11.95131,-13.287zM129,115.5625c0,23.70913 -19.29087,43 -43,43c-23.70913,0 -43,-19.29087 -43,-43v-16.125h8.0625c9.34981,0 17.47413,-5.32931 21.5,-13.11231c4.02587,7.783 12.15019,13.11231 21.5,13.11231h34.9375zM94.0625,94.0625c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125v-2.6875h-5.375v2.6875c0,10.37106 -8.44144,18.8125 -18.8125,18.8125h-13.4375v-5.36425v-0.01075c0,-26.67344 21.70156,-48.375 48.375,-48.375c26.67344,0 48.375,21.70156 48.375,48.375v5.375zM133.17369,126.162c0.41387,-1.84631 0.75519,-3.7195 0.94869,-5.64106c3.25456,-1.03737 5.62762,-4.04738 5.62762,-7.64594c0,-3.5045 -2.24944,-6.45806 -5.375,-7.568v-5.59806c6.12481,1.24969 10.75,6.67575 10.75,13.16606c0,6.9015 -5.24869,12.53719 -11.95131,13.287z" fill="url(#color-4_hUqtl21qkZmg_gr4)"></path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="fs-12 m-t-5 all-caps">{{ __('Standard') }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col b-r b-white">
+        <div class="row fs-12 text-center">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="segment2">
+                <div class="row justify-content-center m-b-5">
+                    <div class="col-auto">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">
+                            <defs>
+                                <linearGradient x1="104.8125" y1="95.74219" x2="104.8125" y2="114.9175" gradientUnits="userSpaceOnUse" id="color-1_TUOBhQt-Vj1j_gr1">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="67.1875" y1="95.74219" x2="67.1875" y2="114.9175" gradientUnits="userSpaceOnUse" id="color-2_TUOBhQt-Vj1j_gr2">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="125.40413" x2="86" y2="133.41288" gradientUnits="userSpaceOnUse" id="color-3_TUOBhQt-Vj1j_gr3">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="10.234" x2="86" y2="158.13788" gradientUnits="userSpaceOnUse" id="color-4_TUOBhQt-Vj1j_gr4">
+                                    <stop offset="0" stop-color="#009add"></stop>
+                                    <stop offset="1" stop-color="#00baa4"></stop>
+                                </linearGradient>
+                            </defs>
+                            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                                <path d="M0,172v-172h172v172z" fill="none"></path>
+                                <g>
+                                    <circle cx="39" cy="39" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-1_TUOBhQt-Vj1j_gr1)"></circle>
+                                    <circle cx="25" cy="39" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-2_TUOBhQt-Vj1j_gr2)"></circle>
+                                    <rect x="28" y="47" transform="scale(2.6875,2.6875)" width="8" height="3" fill="url(#color-3_TUOBhQt-Vj1j_gr3)"></rect>
+                                    <path d="M142.4375,80.11975v-7.55725c0,-31.11856 -25.31625,-56.4375 -56.4375,-56.4375c-31.12125,0 -56.4375,25.31894 -56.4375,56.4375v7.55725c-4.81062,2.79231 -8.0625,7.98994 -8.0625,13.94275c0,8.89294 7.23206,16.125 16.125,16.125h0.13706c1.40556,25.42106 22.47019,45.6875 48.23794,45.6875c25.76775,0 46.83238,-20.26644 48.23794,-45.6875h0.13706c8.89294,0 16.125,-7.23206 16.125,-16.125c0,-5.95281 -3.25188,-11.15044 -8.0625,-13.94275zM34.9375,77.9375v-5.375h16.125c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-5.375h-5.375v5.375c0,4.44512 -3.61738,8.0625 -8.0625,8.0625h-15.83744c2.69556,-25.63875 24.43475,-45.6875 50.77494,-45.6875c26.34019,0 48.07938,20.04875 50.77494,45.6875h-42.71244c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-5.375h-5.375v5.375c0,7.40944 6.02806,13.4375 13.4375,13.4375h43v5.375h-46.91837c-8.213,0 -14.89413,-6.68113 -14.89413,-14.89413v-9.29337h-5.375v8.94937c0,8.40113 -6.837,15.23813 -15.23813,15.23813zM26.875,94.0625c0,-5.92863 4.82138,-10.75 10.75,-10.75v8.0625h-2.6875c-1.4835,0 -2.6875,1.20131 -2.6875,2.6875c0,1.48619 1.204,2.6875 2.6875,2.6875h2.6875v8.0625c-5.92862,0 -10.75,-4.82137 -10.75,-10.75zM86,150.5c-23.70912,0 -43,-19.29087 -43,-43v-24.1875h11.63687c7.61906,0 14.28675,-4.15488 17.85575,-10.31731c3.48031,6.15438 10.08888,10.31731 17.6515,10.31731h38.85587v24.1875c0,23.70913 -19.29087,43 -43,43zM134.375,104.8125v-8.0625h2.6875c1.4835,0 2.6875,-1.20131 2.6875,-2.6875c0,-1.48619 -1.204,-2.6875 -2.6875,-2.6875h-2.6875v-8.0625c5.92863,0 10.75,4.82137 10.75,10.75c0,5.92863 -4.82137,10.75 -10.75,10.75z" fill="url(#color-4_TUOBhQt-Vj1j_gr4)"></path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="fs-12 m-t-5 all-caps">{{ __('Custom') }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col b-r b-white">
+        <div class="row fs-12 text-center">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="segment3">
+                <div class="row justify-content-center m-b-5">
+                    <div class="col-auto">
+                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">
+                            <defs>
+                                <linearGradient x1="104.8125" y1="95.74219" x2="104.8125" y2="114.9175" gradientUnits="userSpaceOnUse" id="color-1_TUOBhQt-Vj1j_gr1">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="67.1875" y1="95.74219" x2="67.1875" y2="114.9175" gradientUnits="userSpaceOnUse" id="color-2_TUOBhQt-Vj1j_gr2">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="125.40413" x2="86" y2="133.41288" gradientUnits="userSpaceOnUse" id="color-3_TUOBhQt-Vj1j_gr3">
+                                    <stop offset="0" stop-color="#4ec9ff"></stop>
+                                    <stop offset="1" stop-color="#2bffe6"></stop>
+                                </linearGradient>
+                                <linearGradient x1="86" y1="10.234" x2="86" y2="158.13788" gradientUnits="userSpaceOnUse" id="color-4_TUOBhQt-Vj1j_gr4">
+                                    <stop offset="0" stop-color="#009add"></stop>
+                                    <stop offset="1" stop-color="#00baa4"></stop>
+                                </linearGradient>
+                            </defs>
+                            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                                <path d="M0,172v-172h172v172z" fill="none"></path>
+                                <g>
+                                    <circle cx="39" cy="39" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-1_TUOBhQt-Vj1j_gr1)"></circle>
+                                    <circle cx="25" cy="39" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-2_TUOBhQt-Vj1j_gr2)"></circle>
+                                    <rect x="28" y="47" transform="scale(2.6875,2.6875)" width="8" height="3" fill="url(#color-3_TUOBhQt-Vj1j_gr3)"></rect>
+                                    <path d="M142.4375,80.11975v-7.55725c0,-31.11856 -25.31625,-56.4375 -56.4375,-56.4375c-31.12125,0 -56.4375,25.31894 -56.4375,56.4375v7.55725c-4.81062,2.79231 -8.0625,7.98994 -8.0625,13.94275c0,8.89294 7.23206,16.125 16.125,16.125h0.13706c1.40556,25.42106 22.47019,45.6875 48.23794,45.6875c25.76775,0 46.83238,-20.26644 48.23794,-45.6875h0.13706c8.89294,0 16.125,-7.23206 16.125,-16.125c0,-5.95281 -3.25188,-11.15044 -8.0625,-13.94275zM34.9375,77.9375v-5.375h16.125c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-5.375h-5.375v5.375c0,4.44512 -3.61738,8.0625 -8.0625,8.0625h-15.83744c2.69556,-25.63875 24.43475,-45.6875 50.77494,-45.6875c26.34019,0 48.07938,20.04875 50.77494,45.6875h-42.71244c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-5.375h-5.375v5.375c0,7.40944 6.02806,13.4375 13.4375,13.4375h43v5.375h-46.91837c-8.213,0 -14.89413,-6.68113 -14.89413,-14.89413v-9.29337h-5.375v8.94937c0,8.40113 -6.837,15.23813 -15.23813,15.23813zM26.875,94.0625c0,-5.92863 4.82138,-10.75 10.75,-10.75v8.0625h-2.6875c-1.4835,0 -2.6875,1.20131 -2.6875,2.6875c0,1.48619 1.204,2.6875 2.6875,2.6875h2.6875v8.0625c-5.92862,0 -10.75,-4.82137 -10.75,-10.75zM86,150.5c-23.70912,0 -43,-19.29087 -43,-43v-24.1875h11.63687c7.61906,0 14.28675,-4.15488 17.85575,-10.31731c3.48031,6.15438 10.08888,10.31731 17.6515,10.31731h38.85587v24.1875c0,23.70913 -19.29087,43 -43,43zM134.375,104.8125v-8.0625h2.6875c1.4835,0 2.6875,-1.20131 2.6875,-2.6875c0,-1.48619 -1.204,-2.6875 -2.6875,-2.6875h-2.6875v-8.0625c5.92863,0 10.75,4.82137 10.75,10.75c0,5.92863 -4.82137,10.75 -10.75,10.75z" fill="url(#color-4_TUOBhQt-Vj1j_gr4)"></path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="fs-12 m-t-5 all-caps">{{ __('Label') }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/pages/segments/index.blade.php b/resources/views/pages/segments/index.blade.php
index a05e9de0..30d6841b 100644
--- a/resources/views/pages/segments/index.blade.php
+++ b/resources/views/pages/segments/index.blade.php
@@ -1,58 +1,21 @@
 @extends('layouts.base_portal')
 @section('inner_content')
 
-
-
-<div class="row tabsContainer p-3 p-md-0">
-    @include('pages.segments._left-tabs')
-    <div class="col bg-white p-l-25 p-r-25 p-t-15 p-b-15">
-
-        @if($segments)
-        @foreach ($segments as $key=>$segment)
-        <div class="row tabsContainer tabContent {{ $key!==0? 'hide':'' }}" tab-name="segment-{{ $segment->id }}">
-            <div class="col">
-                <div class="row">
-                    <div class="col">
-                        <div class="row m-b-25">
-                            <div class="col p-b-15 b-b b-grey">
-                                <div class="font-heading all-caps fs-10 hint-text">
-                                    {{ $segment->name }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col">
-                                <div class="row no-margin ">
-                                    <div class="col parentContainer">
-                                        <list-component key="2" section="segments_{{ $segment->id }}" :endpoint="route('api.company.list')" :options="{
-                                        'segments_in': [{{$segment->id}}],
-                                        'with_total_payments': true, 
-                                        'recency':'2022-02-15', 
-                                        'frequency': 15, 
-                                        'business_type': 2, 
-                                        with_bookings:true, 
-                                        order_by:{ column:'total_payments', DESC:true}}">
-                                            <template slot="list" slot-scope="{data}">
-                                                <company-component :data="data"></company-component>
-                                            </template>
-                                        </list-component>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+<div class=" tabsContainer p-3 p-b-0 p-md-0">
+    @include('pages.segments._tabs')
+    <div class="row">
+        <div class="col bg-white padding-25">
+            <div class="row tabsContainer tabContent m-l-0 m-r-0" tab-name="segment1">
+                <segment-company-component section="standardSegmentSection" :type="1" />
             </div>
+            <div class="row tabsContainer tabContent m-l-0 m-r-0 hide" tab-name="segment2">
+                <segment-company-component section="customSegmentSection" :type="2" />
+            </div>
+            <div class="row tabsContainer tabContent m-l-0 m-r-0 hide" tab-name="segment3">
+                <segment-company-component section="labelSegmentSection" :type="3" />
+            </div>
+
         </div>
-        @endforeach
-        @endif
-
     </div>
 </div>
-<div class="row p-3 p-md-0">
-    <div class="col">
-
-    </div>
-</div>
-
 @endsection
diff --git a/routes/web.php b/routes/web.php
index 3f9899db..f0785976 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -235,7 +235,6 @@ Route::get('/supplier/pi/export', function(){
 });
 
 
-Route::get('/segments', function () {
-    $segments = App\Models\Segment::all();
-    return view('pages.segments.index', compact('segments'));
+Route::get('/segments', function () {   
+    return view('pages.segments.index');
 })->name('segments');