diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 69f4938dfb..c07d5a71fb 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1014,11 +1014,12 @@ export const putAssessmentConfigs = async (
   return resp;
 };
 
+// Notification related request
 export const putNotificationConfigs = async (
   tokens: Tokens,
   notificationConfigs: NotificationConfiguration[]
 ) => {
-  return await request(`notifications/config`, 'PUT', {
+  return await request(`courses/${courseIdWithoutPrefix()}/admin/notifications/config`, 'PUT', {
     ...tokens,
     body: notificationConfigs,
     noHeaderAccept: true
@@ -1081,11 +1082,15 @@ export const removeTimeOptions = async (
   tokens: Tokens,
   timeOptionIds: number[]
 ): Promise<Response | null> => {
-  const resp = await request(`notifications/options`, 'DELETE', {
-    ...tokens,
-    body: timeOptionIds,
-    noHeaderAccept: true
-  });
+  const resp = await request(
+    `courses/${courseIdWithoutPrefix()}/admin/notifications/options`,
+    'DELETE',
+    {
+      ...tokens,
+      body: timeOptionIds,
+      noHeaderAccept: true
+    }
+  );
 
   return resp;
 };
@@ -1094,7 +1099,7 @@ export const putTimeOptions = async (
   tokens: Tokens,
   timeOptions: TimeOption[]
 ): Promise<Response | null> => {
-  const resp = await request(`notifications/options`, 'PUT', {
+  const resp = await request(`courses/${courseIdWithoutPrefix()}/notifications/options`, 'PUT', {
     ...tokens,
     body: timeOptions,
     noHeaderAccept: true
@@ -1106,9 +1111,13 @@ export const putTimeOptions = async (
 export const getNotificationConfigs = async (
   tokens: Tokens
 ): Promise<NotificationConfiguration[] | null> => {
-  const resp = await request(`notifications/config/${courseIdWithoutPrefix()}`, 'GET', {
-    ...tokens
-  });
+  const resp = await request(
+    `courses/${courseIdWithoutPrefix()}/admin/notifications/config`,
+    'GET',
+    {
+      ...tokens
+    }
+  );
   if (!resp || !resp.ok) {
     return null;
   }
@@ -1120,9 +1129,13 @@ export const getConfigurableNotificationConfigs = async (
   tokens: Tokens,
   courseRegId: number
 ): Promise<NotificationConfiguration[] | null> => {
-  const resp = await request(`notifications/config/user/${courseRegId}`, 'GET', {
-    ...tokens
-  });
+  const resp = await request(
+    `courses/${courseIdWithoutPrefix()}/notifications/config/user/${courseRegId}`,
+    'GET',
+    {
+      ...tokens
+    }
+  );
   if (!resp || !resp.ok) {
     return null;
   }
@@ -1155,13 +1168,17 @@ export const putNotificationPreferences = async (
   notiPrefs: NotificationPreference[],
   courseRegId: number
 ): Promise<Response | null> => {
-  const resp = await request(`notifications/preferences`, 'PUT', {
-    ...tokens,
-    body: notiPrefs.map(pref => {
-      return { ...pref, courseRegId: courseRegId };
-    }),
-    noHeaderAccept: true
-  });
+  const resp = await request(
+    `courses/${courseIdWithoutPrefix()}/notifications/preferences`,
+    'PUT',
+    {
+      ...tokens,
+      body: notiPrefs.map(pref => {
+        return { ...pref, courseRegId: courseRegId };
+      }),
+      noHeaderAccept: true
+    }
+  );
 
   return resp;
 };
diff --git a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
index 034b56ab43..4eec4e5c64 100644
--- a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
@@ -15,7 +15,6 @@ import { NotificationConfiguration, TimeOption } from 'src/commons/application/t
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import BooleanCell from './assessmentConfigPanel/BooleanCell';
-import SelectCell from './notificationConfigPanel/SelectCell';
 import TimeOptionCell from './notificationConfigPanel/TimeOptionCell';
 
 const NotificationConfigPanel = () => {
@@ -94,16 +93,21 @@ const NotificationConfigPanel = () => {
     return params.data!.notificationType.forStaff ? 'Staff' : 'Student';
   };
 
+  const notificationTypeId: ValueFormatterFunc<NotificationConfiguration> = params => {
+    const id = params.data!.notificationType?.id || 0;
+    return String(id);
+  };
+
   const columnDefs: ColDef[] = [
     {
-      headerName: 'Notification Type',
-      field: 'notificationType.name',
+      headerName: 'Assessment Type',
+      field: 'assessmentConfig.type',
+      valueFormatter: assessmentTypeFormatter,
       rowDrag: true
     },
     {
-      headerName: 'Assessment Type',
-      field: 'assessmentConfig.type',
-      valueFormatter: assessmentTypeFormatter
+      headerName: 'Notification Type',
+      field: 'notificationType.name'
     },
     {
       headerName: 'Recipients',
@@ -119,16 +123,20 @@ const NotificationConfigPanel = () => {
     //   headerName: 'Past 30 Days',
     //   field: 'notificationType.id'
     // },
+
     {
-      headerName: 'Reminder Time Options (hours)',
+      headerName: 'Default Reminder Time(hours)',
       field: 'timeOptions',
       cellRenderer: TimeOptionCell,
       cellRendererParams: {
         setStateHandler: setTimeOptions,
         setDelete: addTimeOptionsToDelete,
-        field: 'timeOptions'
+        field: 'timeOptions',
+        typeId: notificationTypeId
       }
     },
+
+    /*
     {
       headerName: 'Default Reminder (hours)',
       field: 'timeOptions',
@@ -138,6 +146,7 @@ const NotificationConfigPanel = () => {
         field: 'timeOptions'
       }
     },
+    */
     {
       headerName: 'Enabled',
       field: 'isEnabled',
diff --git a/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/SelectCell.tsx b/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/SelectCell.tsx
deleted file mode 100644
index 5d94ac3390..0000000000
--- a/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/SelectCell.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Button, MenuItem } from '@blueprintjs/core';
-import { ItemRenderer, Select2 } from '@blueprintjs/select';
-import React from 'react';
-import { NotificationConfiguration, TimeOption } from 'src/commons/application/types/SessionTypes';
-import { KeysOfType } from 'src/commons/utils/TypeHelper';
-
-type SelectCellProps = OwnProps;
-
-type OwnProps = {
-  data: NotificationConfiguration;
-  rowIndex: number;
-  field: KeysOfType<NotificationConfiguration, TimeOption[]>;
-  setStateHandler: (rowIndex: number, value: any) => void;
-};
-
-const SelectCell: React.FC<SelectCellProps> = props => {
-  const [selectedOption, setSelectedOption] = React.useState<TimeOption>();
-  const timeOptions: TimeOption[] = props.data[props.field];
-  timeOptions.sort((to1, to2) => to1.minutes - to2.minutes);
-
-  const getUserFriendlyText = (option: TimeOption) =>
-    option.minutes >= 60
-      ? `${Math.round((option.minutes / 60) * 100) / 100} hour(s)`
-      : `${option.minutes} minute(s)`;
-
-  const renderOption: ItemRenderer<TimeOption> = (
-    option: TimeOption,
-    { handleClick, handleFocus, modifiers, query }
-  ) => {
-    return (
-      <MenuItem
-        active={modifiers.active}
-        disabled={modifiers.disabled}
-        key={option.id + '' + option.minutes}
-        onClick={handleClick}
-        onFocus={handleFocus}
-        roleStructure="listoption"
-        text={getUserFriendlyText(option)}
-      />
-    );
-  };
-
-  const defaultTimeOptions = timeOptions.filter(to => to.isDefault);
-  if (defaultTimeOptions.length === 1) {
-    if (!selectedOption || selectedOption.id !== defaultTimeOptions[0].id) {
-      setSelectedOption(defaultTimeOptions[0]);
-    }
-  }
-
-  const handleSelect = (option: TimeOption) => {
-    setSelectedOption(option);
-    const updatedTimeOptions: TimeOption[] = timeOptions.map(timeOption => {
-      return {
-        ...timeOption,
-        isDefault: timeOption.id === option.id && timeOption.minutes === option.minutes
-      };
-    });
-    props.setStateHandler(props.rowIndex, updatedTimeOptions);
-  };
-
-  return (
-    <Select2<TimeOption>
-      filterable={false}
-      items={timeOptions}
-      itemRenderer={renderOption}
-      onItemSelect={handleSelect}
-      noResults={<MenuItem disabled={true} text="No results." roleStructure="listoption" />}
-    >
-      <Button
-        text={selectedOption ? getUserFriendlyText(selectedOption) : 'Choose default'}
-        rightIcon="caret-down"
-      />
-    </Select2>
-  );
-};
-
-export default SelectCell;
diff --git a/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/TimeOptionCell.tsx b/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/TimeOptionCell.tsx
index ff556790e3..8fd9e2afdc 100644
--- a/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/TimeOptionCell.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/notificationConfigPanel/TimeOptionCell.tsx
@@ -12,6 +12,7 @@ type OwnProps = {
   field: KeysOfType<NotificationConfiguration, TimeOption[]>;
   setStateHandler: (rowIndex: number, value: TimeOption[]) => void;
   setDelete: (timeOption: TimeOption) => void;
+  typeId: string;
 };
 
 const TimeOptionCell: React.FC<TimeOptionCellProps> = props => {
@@ -45,10 +46,11 @@ const TimeOptionCell: React.FC<TimeOptionCellProps> = props => {
       const newTimeOption: TimeOption = {
         id: -1,
         minutes: parseFloat(value as string) * 60,
-        isDefault: false
+        isDefault: true
       };
 
       setValues([...values, value]);
+      console.log(props.rowIndex, value, values);
       props.setStateHandler(props.rowIndex, [...timeOptions, newTimeOption]);
     } else {
       // TODO: Toaster if posisble
@@ -57,5 +59,4 @@ const TimeOptionCell: React.FC<TimeOptionCellProps> = props => {
 
   return <TagInput values={values} onRemove={onRemove} onAdd={onAdd} />;
 };
-
 export default TimeOptionCell;
diff --git a/src/pages/academy/notiPreference/NotiPreference.tsx b/src/pages/academy/notiPreference/NotiPreference.tsx
index bc32b2981a..131a01ba75 100644
--- a/src/pages/academy/notiPreference/NotiPreference.tsx
+++ b/src/pages/academy/notiPreference/NotiPreference.tsx
@@ -2,11 +2,15 @@ import { Button, H1, Intent } from '@blueprintjs/core';
 import { ColDef, GridApi, GridReadyEvent, ValueFormatterFunc } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { cloneDeep } from 'lodash';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
+  deleteTimeOptions,
   fetchConfigurableNotificationConfigs,
-  updateNotificationPreferences
+  fetchNotificationConfigs,
+  updateNotificationConfigs,
+  updateNotificationPreferences,
+  updateTimeOptions
 } from 'src/commons/application/actions/SessionActions';
 import {
   NotificationConfiguration,
@@ -17,65 +21,92 @@ import ContentDisplay from 'src/commons/ContentDisplay';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import BooleanCell from './subcomponents/BooleanCell';
-import SelectCell from './subcomponents/SelectCell';
+import TimeOptionCell from './subcomponents/TimeOptionCell';
 
 const NotiPreference: React.FC = () => {
+  const session = useTypedSelector(state => state.session);
+  const notificationConfig = React.useRef<NotificationConfiguration[] | undefined>(
+    session.notificationConfigs
+  );
   const gridApi = React.useRef<GridApi>();
 
   const dispatch = useDispatch();
-  const session = useTypedSelector(state => state.session);
 
   const [hasChanges, setHasChanges] = useState<boolean>(false);
+  const [hasChangesNotificationConfig, setHasChangesNotificationConfig] = useState(false);
 
-  const configurableNotificationConfigs = React.useRef<NotificationConfiguration[] | undefined>(
-    session.configurableNotificationConfigs
-  );
+  const setNotificationConfig = (val: NotificationConfiguration[]) => {
+    notificationConfig.current = val;
+    setHasChangesNotificationConfig(true);
+  };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!session.courseRegId) return;
 
     dispatch(fetchConfigurableNotificationConfigs(session.courseRegId));
   }, [dispatch, session.courseRegId]);
 
-  // After updated configs have been loaded from the backend, put them into local React state
-  React.useEffect(() => {
-    if (session.configurableNotificationConfigs !== undefined) {
-      configurableNotificationConfigs.current = cloneDeep(session.configurableNotificationConfigs);
+  useEffect(() => {
+    dispatch(fetchNotificationConfigs());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const originData = cloneDeep(session.notificationConfigs) as NotificationConfiguration[];
+
+    if (session.configurableNotificationConfigs) {
+      originData.forEach(config => {
+        console.log(config.notificationPreference);
+        const preferencesItem = session.configurableNotificationConfigs?.find(
+          i => i.id === config.id
+        );
+        config.notificationPreference = preferencesItem?.notificationPreference
+          ? preferencesItem!.notificationPreference
+          : {
+              id: -1,
+              isEnabled: true,
+              timeOptionId: null
+            };
+      });
     }
 
-    // Initialise notification preferences if absent
-    configurableNotificationConfigs.current?.forEach(config => {
-      if (config.notificationPreference === null) {
-        config.notificationPreference = {
-          id: -1,
-          isEnabled: true,
-          timeOptionId: null
-        };
-      }
-    });
+    notificationConfig.current = originData;
   }, [session]);
 
-  const setIsEnabled = (index: number, value: boolean) => {
-    const temp = [...(configurableNotificationConfigs.current ?? [])];
+  const [timeOptionsToDelete, setTimeOptionsToDelete] = useState<TimeOption[]>([]);
 
-    temp[index]['notificationPreference'].isEnabled = value;
+  const addTimeOptionsToDelete = (deletedElement: TimeOption) => {
+    // If it is not a newly created row that is yet to be persisted in the backend
+    if (deletedElement.id !== -1) {
+      const temp = [...timeOptionsToDelete];
+      temp.push(deletedElement);
+      setTimeOptionsToDelete(temp);
+    }
+  };
+  const setTimeOptions = (index: number, value: TimeOption[]) => {
+    const temp = [...(notificationConfig.current ?? [])];
+    temp[index] = {
+      ...temp[index],
+      timeOptions: value
+    };
+    setNotificationConfig(temp);
+    gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('timeOptions', value);
 
-    configurableNotificationConfigs.current = temp;
-    gridApi.current
-      ?.getDisplayedRowAtIndex(index)
-      ?.setDataValue('notificationPreference.isEnabled', value);
-    setHasChanges(true);
+    setHasChangesNotificationConfig(true);
   };
 
-  const setTimeOption = (index: number, value: TimeOption) => {
-    const temp = [...(configurableNotificationConfigs.current ?? [])];
+  const notificationTypeId: ValueFormatterFunc<NotificationConfiguration> = params => {
+    const id = params.data!.notificationType?.id || 0;
+    return String(id);
+  };
 
-    temp[index]['notificationPreference'].timeOptionId = value.id;
+  const setIsEnabled = (index: number, value: boolean) => {
+    const temp = [...(notificationConfig.current ?? [])];
 
-    configurableNotificationConfigs.current = temp;
+    temp[index]['notificationPreference'].isEnabled = value;
+    notificationConfig.current = temp;
     gridApi.current
       ?.getDisplayedRowAtIndex(index)
-      ?.setDataValue('timeOptions', temp[index]['timeOptions']);
+      ?.setDataValue('notificationPreference.isEnabled', value);
     setHasChanges(true);
   };
 
@@ -87,29 +118,56 @@ const NotiPreference: React.FC = () => {
     return params.data!.notificationType.forStaff ? 'Staff' : 'Student';
   };
 
+  const defaultTimeFormatter: ValueFormatterFunc<NotificationConfiguration> = params => {
+    const timeOptions = params.data!.timeOptions;
+    timeOptions.sort((to1, to2) => to1.minutes - to2.minutes);
+
+    const getUserFriendlyText = (option: TimeOption) =>
+      option.minutes >= 60
+        ? `${Math.round((option.minutes / 60) * 100) / 100} hour(s)`
+        : `${option.minutes} minute(s)`;
+
+    let result = '';
+    for (const timeOption of timeOptions) {
+      if (timeOption.isDefault) {
+        result += getUserFriendlyText(timeOption);
+        result += ' ';
+      }
+    }
+
+    return result;
+  };
+
   const columnDefs: ColDef[] = [
     {
-      headerName: 'Notification Type',
-      field: 'notificationType.name',
+      headerName: 'Assessment Type',
+      field: 'assessmentConfig.type',
+      valueFormatter: assessmentTypeFormatter,
       rowDrag: true
     },
     {
-      headerName: 'Assessment Type',
-      field: 'assessmentConfig.type',
-      valueFormatter: assessmentTypeFormatter
+      headerName: 'Notification Type',
+      field: 'notificationType.name'
     },
     {
       headerName: 'Recipients',
       field: 'notificationType.forStaff',
       valueFormatter: recipientFormatter
     },
+    {
+      headerName: 'Default Time',
+      field: 'timeOptions',
+      valueFormatter: defaultTimeFormatter
+    },
     {
       headerName: 'Reminder',
       field: 'timeOptions',
-      cellRenderer: SelectCell,
+      cellRenderer: TimeOptionCell,
       cellRendererParams: {
-        setStateHandler: setTimeOption,
-        field: 'timeOptions'
+        setStateHandler: setTimeOptions,
+        setDelete: addTimeOptionsToDelete,
+        field: 'timeOptions',
+        typeId: notificationTypeId
       }
     },
     {
@@ -135,18 +193,44 @@ const NotiPreference: React.FC = () => {
   };
 
   const submitHandler = () => {
-    if (!hasChanges) return;
-
-    const preferences: NotificationPreference[] =
-      configurableNotificationConfigs.current?.map(config => {
-        return {
-          ...config.notificationPreference,
-          notificationConfigId: config.id
-        };
-      }) ?? [];
-    dispatch(updateNotificationPreferences(preferences, session.courseRegId!));
-
-    setHasChanges(false);
+    if (hasChanges) {
+      const preferences: NotificationPreference[] =
+        notificationConfig.current?.map(config => {
+          return {
+            ...config.notificationPreference,
+            notificationConfigId: config.id
+          };
+        }) ?? [];
+      dispatch(updateNotificationPreferences(preferences, session.courseRegId!));
+      setHasChanges(false);
+    }
+
+    if (hasChangesNotificationConfig) {
+      const allTimeOptions: TimeOption[] = [];
+      notificationConfig.current?.forEach(curr => {
+        const timeOptions = curr.timeOptions.map(timeOption => {
+          return {
+            ...timeOption,
+            notificationConfigId: curr.id
+          };
+        });
+        allTimeOptions.push(...timeOptions);
+      });
+
+      console.log(allTimeOptions);
+
+      if (allTimeOptions.length > 0) {
+        dispatch(updateTimeOptions(allTimeOptions));
+      }
+
+      if (timeOptionsToDelete.length > 0) {
+        dispatch(deleteTimeOptions(timeOptionsToDelete.map(timeOption => timeOption.id)));
+        setTimeOptionsToDelete([]);
+      }
+
+      dispatch(updateNotificationConfigs(notificationConfig.current ?? []));
+      setHasChangesNotificationConfig(false);
+    }
   };
 
   const data = (
@@ -159,7 +243,7 @@ const NotiPreference: React.FC = () => {
           defaultColDef={defaultColumnDefs}
           onGridReady={onGridReady}
           onGridSizeChanged={() => gridApi.current?.sizeColumnsToFit()}
-          rowData={configurableNotificationConfigs.current}
+          rowData={notificationConfig.current}
           rowHeight={36}
           rowDragManaged={true}
           suppressCellFocus={true}
@@ -170,8 +254,8 @@ const NotiPreference: React.FC = () => {
       <Button
         text="Save"
         style={{ marginTop: '15px' }}
-        disabled={!hasChanges}
-        intent={hasChanges ? Intent.WARNING : Intent.NONE}
+        disabled={!(hasChanges || hasChangesNotificationConfig)}
+        intent={hasChanges || hasChangesNotificationConfig ? Intent.WARNING : Intent.NONE}
         onClick={submitHandler}
       />
     </div>
diff --git a/src/pages/academy/notiPreference/subcomponents/SelectCell.tsx b/src/pages/academy/notiPreference/subcomponents/SelectCell.tsx
deleted file mode 100644
index 09467327d4..0000000000
--- a/src/pages/academy/notiPreference/subcomponents/SelectCell.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Button, MenuItem } from '@blueprintjs/core';
-import { ItemRenderer, Select2 } from '@blueprintjs/select';
-import React from 'react';
-import { NotificationConfiguration, TimeOption } from 'src/commons/application/types/SessionTypes';
-import { KeysOfType } from 'src/commons/utils/TypeHelper';
-
-type SelectCellProps = OwnProps;
-
-type OwnProps = {
-  data: NotificationConfiguration;
-  rowIndex: number;
-  field: KeysOfType<NotificationConfiguration, TimeOption[]>;
-  setStateHandler: (rowIndex: number, value: TimeOption) => void;
-};
-
-const SelectCell: React.FC<SelectCellProps> = props => {
-  const [selectedOption, setSelectedOption] = React.useState<TimeOption>();
-  const timeOptions: TimeOption[] = props.data[props.field];
-  timeOptions.sort((to1, to2) => to1.minutes - to2.minutes);
-
-  const getUserFriendlyText = (option: TimeOption) =>
-    option.minutes >= 60
-      ? `${Math.round((option.minutes / 60) * 100) / 100} hour(s)`
-      : `${option.minutes} minute(s)`;
-
-  const renderOption: ItemRenderer<TimeOption> = (
-    option: TimeOption,
-    { handleClick, handleFocus, modifiers, query }
-  ) => {
-    return (
-      <MenuItem
-        active={modifiers.active}
-        disabled={modifiers.disabled}
-        key={option.id}
-        onClick={handleClick}
-        onFocus={handleFocus}
-        roleStructure="listoption"
-        text={getUserFriendlyText(option)}
-      />
-    );
-  };
-
-  const systemEnabled = props.data['isEnabled'];
-
-  // look for default time option
-  let defaultTimeOption: TimeOption | undefined;
-  const defaultTimeOptions = timeOptions.filter(to => to.isDefault);
-  if (defaultTimeOptions.length === 1) {
-    defaultTimeOption = defaultTimeOptions[0];
-  }
-
-  // look for preferred time option
-  let prefTimeOption: TimeOption | undefined;
-  if (props.data.notificationPreference !== null) {
-    const filteredTimeOptions = timeOptions.filter(
-      to => to.id === props.data.notificationPreference.timeOptionId
-    );
-    if (filteredTimeOptions.length === 1) {
-      prefTimeOption = filteredTimeOptions[0];
-    }
-  }
-
-  // initial value prioritises preferred time option, fallback on default
-  if (prefTimeOption || defaultTimeOption) {
-    const timeOption = prefTimeOption ? prefTimeOption : defaultTimeOption;
-    if (!selectedOption || selectedOption.id !== timeOption!.id) {
-      setSelectedOption(timeOption);
-    }
-  }
-
-  const handleSelect = (option: TimeOption) => {
-    setSelectedOption(option);
-    props.setStateHandler(props.rowIndex, option);
-  };
-
-  return (
-    <Select2<TimeOption>
-      filterable={false}
-      items={timeOptions}
-      itemRenderer={renderOption}
-      onItemSelect={handleSelect}
-      noResults={<MenuItem disabled={true} text="No results." roleStructure="listoption" />}
-      disabled={!systemEnabled}
-    >
-      <Button
-        text={selectedOption ? getUserFriendlyText(selectedOption) : 'Choose default'}
-        rightIcon="caret-down"
-        disabled={!systemEnabled}
-      />
-    </Select2>
-  );
-};
-
-export default SelectCell;
diff --git a/src/pages/academy/notiPreference/subcomponents/TimeOptionCell.tsx b/src/pages/academy/notiPreference/subcomponents/TimeOptionCell.tsx
new file mode 100644
index 0000000000..07d501b79d
--- /dev/null
+++ b/src/pages/academy/notiPreference/subcomponents/TimeOptionCell.tsx
@@ -0,0 +1,61 @@
+import { TagInput } from '@blueprintjs/core';
+import { isInteger } from 'lodash';
+import React, { useState } from 'react';
+import { NotificationConfiguration, TimeOption } from 'src/commons/application/types/SessionTypes';
+import { KeysOfType } from 'src/commons/utils/TypeHelper';
+
+type TimeOptionCellProps = OwnProps;
+
+type OwnProps = {
+  data: NotificationConfiguration;
+  rowIndex: number;
+  field: KeysOfType<NotificationConfiguration, TimeOption[]>;
+  setStateHandler: (rowIndex: number, value: TimeOption[]) => void;
+  setDelete: (timeOption: TimeOption) => void;
+  typeId: string;
+};
+
+const TimeOptionCell: React.FC<TimeOptionCellProps> = props => {
+  const timeOptions: TimeOption[] = props.data[props.field];
+  const [values, setValues] = useState<React.ReactNode[]>(
+    timeOptions.map((timeOption: TimeOption) => (timeOption.minutes / 60).toFixed(2).toString())
+  );
+
+  function isValidTimeOption(n: string) {
+    const num = parseFloat(n);
+    const minutes = num * 60;
+    if (!isInteger(minutes)) return false;
+    // Check if time option already exists
+    if (timeOptions.some((timeOption: TimeOption) => timeOption.minutes === minutes)) return false;
+
+    return !isNaN(num) && isFinite(num) && num >= 0;
+  }
+
+  const onRemove = (value: React.ReactNode, index: number) => {
+    setValues(values.filter(i => i !== value));
+    props.setDelete(timeOptions[index]);
+    props.setStateHandler(
+      props.rowIndex,
+      timeOptions.filter((_, i) => i !== index)
+    );
+  };
+
+  const onAdd = (value: React.ReactNode) => {
+    if (isValidTimeOption(value as string)) {
+      const newTimeOption: TimeOption = {
+        id: -1,
+        minutes: parseFloat(value as string) * 60,
+        isDefault: false
+      };
+
+      setValues([...values, ...(value as string[])]);
+      props.setStateHandler(props.rowIndex, [...timeOptions, newTimeOption]);
+    } else {
+      // TODO: Toaster if posisble
+    }
+  };
+
+  return <TagInput values={values} onRemove={onRemove} onAdd={onAdd} />;
+};
+
+export default TimeOptionCell;