diff --git a/app/javascript/dashboard/api/sla.js b/app/javascript/dashboard/api/sla.js
index 7aec3cc27..d2fffc9ff 100644
--- a/app/javascript/dashboard/api/sla.js
+++ b/app/javascript/dashboard/api/sla.js
@@ -1,4 +1,4 @@
-/* global axios */
+// /* global axios */
 
 import ApiClient from './ApiClient';
 
@@ -6,11 +6,6 @@ class SlaAPI extends ApiClient {
   constructor() {
     super('sla_policies', { accountScoped: true });
   }
-
-  get({ page }) {
-    const url = page ? `${this.url}?page=${page}` : this.url;
-    return axios.get(url);
-  }
 }
 
 export default new SlaAPI();
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index bc068700b..2c423f538 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -9,25 +9,35 @@
       "404": "There are no slas available in this account.",
       "TITLE": "Manage slas",
       "DESC": "SLA let you group the conversations together.",
-      "TABLE_HEADER": ["Name", "Description", "Color"]
+      "TABLE_HEADER": ["Name", "Description", "FRT", "NRT", "RT", "Business Hours"]
     },
     "FORM": {
       "NAME": {
-        "SLA": "SLA Name",
-        "PLACEHOLDER": "SLA name",
+        "LABEL": "SLA Name",
+        "PLACEHOLDER": "SLA Name",
         "REQUIRED_ERROR": "SLA name is required",
         "MINIMUM_LENGTH_ERROR": "Minimum length 2 is required",
         "VALID_ERROR": "Only Alphabets, Numbers, Hyphen and Underscore are allowed"
       },
       "DESCRIPTION": {
-        "SLA": "Description",
+        "LABEL": "Description",
         "PLACEHOLDER": "SLA Description"
       },
-      "COLOR": {
-        "SLA": "Color"
+      "FIRST_RESPONSE_TIME": {
+        "LABEL": "First Response Time",
+        "PLACEHOLDER": "First Response Time"
       },
-      "SHOW_ON_SIDEBAR": {
-        "SLA": "Show sla on sidebar"
+      "NEXT_RESPONSE_TIME": {
+        "LABEL": "Next Response Time",
+        "PLACEHOLDER": "Next Response Time"
+      },
+      "RESOLUTION_TIME": {
+        "LABEL": "Resolution Time",
+        "PLACEHOLDER": "Resolution Time"
+      },
+      "BUSINESS_HOURS": {
+        "LABEL": "Business Hours",
+        "PLACEHOLDER": "Business Hours"
       },
       "EDIT": "Edit",
       "CREATE": "Create",
@@ -48,7 +58,7 @@
       "ADD_ALL_SLAS": "Add all slas"
     },
     "ADD": {
-      "TITLE": "Add sla",
+      "TITLE": "Add SLA",
       "DESC": "SLA let you group the conversations together.",
       "API": {
         "SUCCESS_MESSAGE": "SLA added successfully",
@@ -56,7 +66,7 @@
       }
     },
     "EDIT": {
-      "TITLE": "Edit sla",
+      "TITLE": "Edit SLA",
       "API": {
         "SUCCESS_MESSAGE": "SLA updated successfully",
         "ERROR_MESSAGE": "There was an error, please try again"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index e02c38559..83f36afc7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -6,41 +6,60 @@
     />
     <form class="mx-0 flex flex-wrap" @submit.prevent="addSLA">
       <woot-input
-        v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        v-model.trim="name"
+        :class="{ error: $v.name.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA.FORM.NAME.SLA')"
+        :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="getSLATitleErrorMessage"
-        data-testid="sla-title"
-        @input="$v.title.$touch"
+        :error="getSlaNameErrorMessage"
+        data-testid="sla-name"
+        @input="$v.name.$touch"
       />
 
       <woot-input
         v-model.trim="description"
-        :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
         data-testid="sla-description"
-        @input="$v.description.$touch"
       />
 
-      <div class="w-full">
-        <sla>
-          {{ $t('SLA.FORM.COLOR.SLA') }}
-          <woot-color-picker v-model="color" />
-        </sla>
-      </div>
-      <div class="w-full">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <sla for="conversation_creation">
-          {{ $t('SLA.FORM.SHOW_ON_SIDEBAR.SLA') }}
-        </sla>
-      </div>
+      <woot-input
+        v-model.trim="firstResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.FIRST_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.FIRST_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-firstResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="nextResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.NEXT_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.NEXT_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-nextResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="resolutionTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.RESOLUTION_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.RESOLUTION_TIME.PLACEHOLDER')"
+        data-testid="sla-resolutionTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="onlyDuringBusinessHours"
+        class="w-full"
+        type="checkbox"
+        :label="$t('SLA.FORM.BUSINESS_HOURS.LABEL')"
+        :placeholder="$t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER')"
+        data-testid="sla-onlyDuringBusinessHours"
+      />
+
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isCreating"
+          :is-disabled="$v.name.$invalid || uiFlags.isCreating"
           :is-loading="uiFlags.isCreating"
           data-testid="sla-submit"
         >
@@ -59,45 +78,41 @@ import alertMixin from 'shared/mixins/alertMixin';
 import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
 import validations from './validations';
-import { getRandomColor } from 'dashboard/helper/labelColor';
 
 export default {
   mixins: [alertMixin, validationMixin],
-  props: {
-    prefillTitle: {
-      type: String,
-      default: '',
-    },
-  },
+  props: {},
   data() {
     return {
-      color: '#000',
+      name: '',
       description: '',
-      title: '',
+      firstResponseTimeThreshold: '',
+      nextResponseTimeThreshold: '',
+      resolutionTimeThreshold: '',
+      onlyDuringBusinessHours: '',
       showOnSidebar: true,
     };
   },
   validations,
   computed: {
     ...mapGetters({
-      uiFlags: 'slas/getUIFlags',
+      uiFlags: 'sla/getUIFlags',
     }),
   },
-  mounted() {
-    this.color = getRandomColor();
-    this.title = this.prefillTitle.toLowerCase();
-  },
+  mounted() {},
   methods: {
     onClose() {
       this.$emit('close');
     },
     async addSLA() {
       try {
-        await this.$store.dispatch('slas/create', {
-          color: this.color,
+        await this.$store.dispatch('sla/create', {
+          name: this.name,
           description: this.description,
-          title: this.title.toLowerCase(),
-          show_on_sidebar: this.showOnSidebar,
+          first_response_time_threshold: this.firstResponseTimeThreshold,
+          next_response_time_threshold: this.nextResponseTimeThreshold,
+          resolution_time_threshold: this.resolutionTimeThreshold,
+          only_during_business_hours: this.onlyDuringBusinessHours,
         });
         this.showAlert(this.$t('SLA.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
@@ -110,13 +125,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-// SLA API supports only lowercase letters
-.sla-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
index c3abdb4fe..e7066d237 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/EditSLA.vue
@@ -3,38 +3,57 @@
     <woot-modal-header :header-title="pageTitle" />
     <form class="mx-0 flex flex-wrap" @submit.prevent="editSLA">
       <woot-input
-        v-model.trim="title"
-        :class="{ error: $v.title.$error }"
+        v-model.trim="name"
+        :class="{ error: $v.name.$error }"
         class="w-full sla-name--input"
-        :sla="$t('SLA.FORM.NAME.SLA')"
+        :sla="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="getSLATitleErrorMessage"
-        @input="$v.title.$touch"
+        :error="getSlaNameErrorMessage"
+        @input="$v.name.$touch"
       />
       <woot-input
         v-model.trim="description"
-        :class="{ error: $v.description.$error }"
         class="w-full"
-        :sla="$t('SLA.FORM.DESCRIPTION.SLA')"
+        :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
-        @input="$v.description.$touch"
+        data-testid="sla-description"
+      />
+
+      <woot-input
+        v-model.trim="firstResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.FIRST_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.FIRST_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-firstResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="nextResponseTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.NEXT_RESPONSE_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.NEXT_RESPONSE_TIME.PLACEHOLDER')"
+        data-testid="sla-nextResponseTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="resolutionTimeThreshold"
+        class="w-full"
+        :label="$t('SLA.FORM.RESOLUTION_TIME.LABEL')"
+        :placeholder="$t('SLA.FORM.RESOLUTION_TIME.PLACEHOLDER')"
+        data-testid="sla-resolutionTimeThreshold"
+      />
+
+      <woot-input
+        v-model.trim="onlyDuringBusinessHours"
+        class="w-full"
+        :label="$t('SLA.FORM.BUSINESS_HOURS.LABEL')"
+        :placeholder="$t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER')"
+        data-testid="sla-onlyDuringBusinessHours"
       />
 
-      <div class="w-full">
-        <sla>
-          {{ $t('SLA.FORM.COLOR.SLA') }}
-          <woot-color-picker v-model="color" />
-        </sla>
-      </div>
-      <div class="w-full">
-        <input v-model="showOnSidebar" type="checkbox" :value="true" />
-        <sla for="conversation_creation">
-          {{ $t('SLA.FORM.SHOW_ON_SIDEBAR.SLA') }}
-        </sla>
-      </div>
       <div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
         <woot-button
-          :is-disabled="$v.title.$invalid || uiFlags.isUpdating"
+          :is-disabled="$v.name.$invalid || uiFlags.isUpdating"
           :is-loading="uiFlags.isUpdating"
         >
           {{ $t('SLA.FORM.EDIT') }}
@@ -63,19 +82,21 @@ export default {
   },
   data() {
     return {
-      title: '',
+      name: '',
       description: '',
-      showOnSidebar: true,
-      color: '',
+      firstResponseTimeThreshold: '',
+      nextResponseTimeThreshold: '',
+      resolutionTimeThreshold: '',
+      onlyDuringBusinessHours: '',
     };
   },
   validations,
   computed: {
     ...mapGetters({
-      uiFlags: 'slas/getUIFlags',
+      uiFlags: 'sla/getUIFlags',
     }),
     pageTitle() {
-      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.title}`;
+      return `${this.$t('SLA.EDIT.TITLE')} - ${this.selectedResponse.name}`;
     },
   },
   mounted() {
@@ -86,19 +107,27 @@ export default {
       this.$emit('close');
     },
     setFormValues() {
-      this.title = this.selectedResponse.title;
+      this.name = this.selectedResponse.name;
       this.description = this.selectedResponse.description;
-      this.showOnSidebar = this.selectedResponse.show_on_sidebar;
-      this.color = this.selectedResponse.color;
+      this.firstResponseTimeThreshold =
+        this.selectedResponse.first_response_time_threshold;
+      this.nextResponseTimeThreshold =
+        this.selectedResponse.next_response_time_threshold;
+      this.resolutionTimeThreshold =
+        this.selectedResponse.resolution_time_threshold;
+      this.onlyDuringBusinessHours =
+        this.selectedResponse.only_during_business_hours.toString();
     },
     editSLA() {
       this.$store
-        .dispatch('slas/update', {
+        .dispatch('sla/update', {
           id: this.selectedResponse.id,
-          color: this.color,
+          name: this.name,
           description: this.description,
-          title: this.title.toLowerCase(),
-          show_on_sidebar: this.showOnSidebar,
+          first_response_time_threshold: this.firstResponseTimeThreshold,
+          next_response_time_threshold: this.nextResponseTimeThreshold,
+          resolution_time_threshold: this.resolutionTimeThreshold,
+          only_during_business_hours: this.onlyDuringBusinessHours,
         })
         .then(() => {
           this.showAlert(this.$t('SLA.EDIT.API.SUCCESS_MESSAGE'));
@@ -111,13 +140,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-// SLA API supports only lowercase letters
-.sla-name--input {
-  ::v-deep {
-    input {
-      @apply lowercase;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index fc8729d7f..b807edcf2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -27,10 +27,10 @@
             </th>
           </thead>
           <tbody>
-            <tr v-for="(sla, index) in records" :key="sla.title">
+            <tr v-for="sla in records" :key="sla.title">
               <td class="sla-title">
                 <span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
-                  sla.title
+                  sla.name
                 }}</span>
               </td>
               <td>{{ sla.description }}</td>
@@ -40,7 +40,34 @@
                     class="sla-color--display"
                     :style="{ backgroundColor: sla.color }"
                   />
-                  {{ sla.color }}
+                  {{ sla.first_response_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.next_response_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.resolution_time_threshold }}
+                </div>
+              </td>
+              <td>
+                <div class="sla-color--container">
+                  <span
+                    class="sla-color--display"
+                    :style="{ backgroundColor: sla.color }"
+                  />
+                  {{ sla.only_during_business_hours }}
                 </div>
               </td>
               <td class="button-wrapper">
@@ -54,16 +81,6 @@
                   icon="edit"
                   @click="openEditPopup(sla)"
                 />
-                <woot-button
-                  v-tooltip.top="$t('SLA.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  :is-loading="loading[sla.id]"
-                  @click="openDeletePopup(sla, index)"
-                />
               </td>
             </tr>
           </tbody>
@@ -118,8 +135,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-      records: 'slas/getslas',
-      uiFlags: 'slas/getUIFlags',
+      records: 'sla/getSLA',
+      uiFlags: 'sla/getUIFlags',
     }),
     // Delete Modal
     deleteConfirmText() {
@@ -133,7 +150,7 @@ export default {
     },
   },
   mounted() {
-    this.$store.dispatch('slas/get');
+    this.$store.dispatch('sla/get');
   },
   methods: {
     openAddPopup() {
@@ -193,7 +210,7 @@ export default {
 }
 .sla-title {
   span {
-    @apply w-60 inline-block;
+    @apply inline-block;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 47d1527f1..360c5a1f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -11,7 +11,7 @@ export default {
       props: {
         headerTitle: 'SLA.HEADER',
         icon: 'tag',
-        showNewButton: false,
+        showNewButton: true,
       },
       children: [
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
index 17d4eccd4..cbe7bce2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
@@ -1,14 +1,14 @@
 export default {
   computed: {
-    getLabelTitleErrorMessage() {
+    getSlaNameErrorMessage() {
       let errorMessage = '';
-      if (!this.$v.title.$error) {
+      if (!this.$v.name.$error) {
         errorMessage = '';
-      } else if (!this.$v.title.required) {
+      } else if (!this.$v.name.required) {
         errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
-      } else if (!this.$v.title.minLength) {
+      } else if (!this.$v.name.minLength) {
         errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
-      } else if (!this.$v.title.validLabelCharacters) {
+      } else if (!this.$v.name.validLabelCharacters) {
         errorMessage = this.$t('SLA.FORM.NAME.VALID_ERROR');
       }
       return errorMessage;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
index 0a2373a06..bda4b9556 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/validations.js
@@ -1,16 +1,8 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 
-export const validLabelCharacters = (str = '') => !!str && !str.includes(' ');
-
 export default {
-  title: {
+  name: {
     required,
     minLength: minLength(2),
-    validLabelCharacters,
   },
-  description: {},
-  color: {
-    required,
-  },
-  showOnSidebar: {},
 };
diff --git a/app/javascript/dashboard/store/modules/sla.js b/app/javascript/dashboard/store/modules/sla.js
index b633feb98..790118e34 100644
--- a/app/javascript/dashboard/store/modules/sla.js
+++ b/app/javascript/dashboard/store/modules/sla.js
@@ -24,14 +24,11 @@ export const getters = {
 };
 
 export const actions = {
-  get: async function getSLA({ commit }) {
+  get: async function get({ commit }) {
     commit(types.SET_SLA_UI_FLAG, { isFetching: true });
     try {
-      const response = await SlaAPI.get(true);
-      const sortedSLA = response.data.payload.sort((a, b) =>
-        a.title.localeCompare(b.title)
-      );
-      commit(types.SET_SLA, sortedSLA);
+      const response = await SlaAPI.get();
+      commit(types.SET_SLA, response.data.payload);
     } catch (error) {
       // Ignore error
     } finally {
@@ -39,12 +36,12 @@ export const actions = {
     }
   },
 
-  create: async function createSLA({ commit }, cannedObj) {
+  create: async function create({ commit }, slaObj) {
     commit(types.SET_SLA_UI_FLAG, { isCreating: true });
     try {
-      const response = await SlaAPI.create(cannedObj);
+      const response = await SlaAPI.create(slaObj);
       AnalyticsHelper.track(SLA_EVENTS.CREATE);
-      commit(types.ADD_SLA, response.data);
+      commit(types.ADD_SLA, response.data.payload);
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
@@ -53,31 +50,18 @@ export const actions = {
     }
   },
 
-  update: async function updateSLA({ commit }, { id, ...updateObj }) {
+  update: async function update({ commit }, { id, ...updateObj }) {
     commit(types.SET_SLA_UI_FLAG, { isUpdating: true });
     try {
       const response = await SlaAPI.update(id, updateObj);
       AnalyticsHelper.track(SLA_EVENTS.UPDATE);
-      commit(types.EDIT_SLA, response.data);
+      commit(types.EDIT_SLA, response.data.payload);
     } catch (error) {
       throw new Error(error);
     } finally {
       commit(types.SET_SLA_UI_FLAG, { isUpdating: false });
     }
   },
-
-  delete: async function deleteSLA({ commit }, id) {
-    commit(types.SET_SLA_UI_FLAG, { isDeleting: true });
-    try {
-      await SlaAPI.delete(id);
-      AnalyticsHelper.track(SLA_EVENTS.DELETED);
-      commit(types.DELETE_SLA, id);
-    } catch (error) {
-      throw new Error(error);
-    } finally {
-      commit(types.SET_SLA_UI_FLAG, { isDeleting: false });
-    }
-  },
 };
 
 export const mutations = {
@@ -91,7 +75,6 @@ export const mutations = {
   [types.SET_SLA]: MutationHelpers.set,
   [types.ADD_SLA]: MutationHelpers.create,
   [types.EDIT_SLA]: MutationHelpers.update,
-  [types.DELETE_SLA]: MutationHelpers.destroy,
 };
 
 export default {