diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
index b94b60fa7f4d1..ee1958e255b16 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
@@ -1,6 +1,7 @@
 import { css, cx } from '@emotion/css';
+import { TimePickerProps } from 'rc-time-picker';
 import React, { FC, FormEvent, ReactNode, useCallback, useEffect, useState } from 'react';
-import Calendar from 'react-calendar';
+import Calendar, { CalendarProps } from 'react-calendar';
 import { useMedia } from 'react-use';
 
 import { dateTimeFormat, DateTime, dateTime, GrafanaTheme2, isDateTime } from '@grafana/data';
@@ -21,11 +22,14 @@ export interface Props {
   label?: ReactNode;
   /** Set the latest selectable date */
   maxDate?: Date;
+  // @PERCONA
+  calendarProps?: CalendarProps;
+  timepickerProps?: TimePickerProps;
 }
 
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
 
-export const DateTimePicker: FC<Props> = ({ date, maxDate, label, onChange }) => {
+export const DateTimePicker: FC<Props> = ({ date, maxDate, label, onChange, calendarProps, timepickerProps }) => {
   const [isOpen, setOpen] = useState(false);
 
   const theme = useTheme2();
@@ -61,13 +65,22 @@ export const DateTimePicker: FC<Props> = ({ date, maxDate, label, onChange }) =>
               isFullscreen={true}
               onClose={() => setOpen(false)}
               maxDate={maxDate}
+              calendarProps={calendarProps}
+              timepickerProps={timepickerProps}
             />
           </ClickOutsideWrapper>
         ) : (
           <Portal>
             <ClickOutsideWrapper onClick={() => setOpen(false)}>
               <div className={styles.modal} onClick={stopPropagation}>
-                <DateTimeCalendar date={date} onChange={onApply} isFullscreen={false} onClose={() => setOpen(false)} />
+                <DateTimeCalendar
+                  date={date}
+                  onChange={onApply}
+                  isFullscreen={false}
+                  onClose={() => setOpen(false)}
+                  calendarProps={calendarProps}
+                  timepickerProps={timepickerProps}
+                />
               </div>
               <div className={containerStyles.backdrop} onClick={stopPropagation} />
             </ClickOutsideWrapper>
@@ -84,6 +97,9 @@ interface DateTimeCalendarProps {
   onClose: () => void;
   isFullscreen: boolean;
   maxDate?: Date;
+  // @PERCONA
+  calendarProps?: CalendarProps;
+  timepickerProps?: TimePickerProps;
 }
 
 interface InputProps {
@@ -161,7 +177,15 @@ const DateTimeInput: FC<InputProps> = ({ date, label, onChange, isFullscreen, on
   );
 };
 
-const DateTimeCalendar: FC<DateTimeCalendarProps> = ({ date, onClose, onChange, isFullscreen, maxDate }) => {
+const DateTimeCalendar: FC<DateTimeCalendarProps> = ({
+  date,
+  onClose,
+  onChange,
+  isFullscreen,
+  maxDate,
+  calendarProps,
+  timepickerProps,
+}) => {
   const calendarStyles = useStyles2(getBodyStyles);
   const styles = useStyles2(getStyles);
   const [internalDate, setInternalDate] = useState<Date>(() => {
@@ -190,6 +214,12 @@ const DateTimeCalendar: FC<DateTimeCalendarProps> = ({ date, onClose, onChange,
     setInternalDate(date.toDate());
   }, []);
 
+  useEffect(() => {
+    if (date?.isValid()) {
+      setInternalDate(date.toDate());
+    }
+  }, [date]);
+
   return (
     <div className={cx(styles.container, { [styles.fullScreen]: isFullscreen })} onClick={stopPropagation}>
       <Calendar
@@ -205,9 +235,15 @@ const DateTimeCalendar: FC<DateTimeCalendarProps> = ({ date, onClose, onChange,
         className={calendarStyles.body}
         tileClassName={calendarStyles.title}
         maxDate={maxDate}
+        {...calendarProps}
       />
       <div className={styles.time}>
-        <TimeOfDayPicker showSeconds={true} onChange={onChangeTime} value={dateTime(internalDate)} />
+        <TimeOfDayPicker
+          showSeconds={true}
+          onChange={onChangeTime}
+          value={dateTime(internalDate)}
+          timepickerProps={timepickerProps}
+        />
       </div>
       <HorizontalGroup>
         <Button type="button" onClick={() => onChange(dateTime(internalDate))}>
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
index 6d5bc4a27329e..113d976ace65b 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import RcTimePicker from 'rc-time-picker';
+import RcTimePicker, { TimePickerProps } from 'rc-time-picker';
 import React, { FC } from 'react';
 
 import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
@@ -18,6 +18,7 @@ export interface Props {
   minuteStep?: number;
   size?: FormInputSize;
   disabled?: boolean;
+  timepickerProps?: TimePickerProps;
 }
 
 export const TimeOfDayPicker: FC<Props> = ({
@@ -28,6 +29,7 @@ export const TimeOfDayPicker: FC<Props> = ({
   value,
   size = 'auto',
   disabled,
+  timepickerProps,
 }) => {
   const styles = useStyles(getStyles);
 
@@ -44,6 +46,7 @@ export const TimeOfDayPicker: FC<Props> = ({
       minuteStep={minuteStep}
       inputIcon={<Caret wrapperStyle={styles.caretWrapper} />}
       disabled={disabled}
+      {...timepickerProps}
     />
   );
 };
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
index 86cb0bc80cb3c..aae485a10ddf5 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
@@ -88,6 +88,12 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
         display: flex;
       }
 
+      .react-calendar__month-view__days__day:disabled,
+      .react-calendar__year-view__months__month:disabled,
+      .react-calendar__decade-view__years__year:disabled {
+        color: #3f4249;
+      }
+
       .react-calendar__navigation__label,
       .react-calendar__navigation__arrow,
       .react-calendar__navigation {
diff --git a/public/app/percona/backup/components/BackupInventory/BackupInventory.constants.ts b/public/app/percona/backup/components/BackupInventory/BackupInventory.constants.ts
index d39b64dd0c55d..b8cdbb9d09bd6 100644
--- a/public/app/percona/backup/components/BackupInventory/BackupInventory.constants.ts
+++ b/public/app/percona/backup/components/BackupInventory/BackupInventory.constants.ts
@@ -3,3 +3,5 @@ export const LIST_ARTIFACTS_CANCEL_TOKEN = 'listArtifacts';
 export const BACKUP_CANCEL_TOKEN = 'backup';
 export const RESTORE_CANCEL_TOKEN = 'restore';
 export const LOGS_LIMIT = 50;
+export const DAY_FORMAT = 'YYYY[-]MM[-]DD';
+export const HOUR_FORMAT = 'HH[:]mm[:]ss';
diff --git a/public/app/percona/backup/components/BackupInventory/BackupInventory.service.ts b/public/app/percona/backup/components/BackupInventory/BackupInventory.service.ts
index c91be304c5a9b..9d77d0d54a578 100644
--- a/public/app/percona/backup/components/BackupInventory/BackupInventory.service.ts
+++ b/public/app/percona/backup/components/BackupInventory/BackupInventory.service.ts
@@ -1,11 +1,13 @@
 import { CancelToken } from 'axios';
 
+import { SelectableValue } from '@grafana/data';
 import { DBServiceList, ServiceListPayload } from 'app/percona/inventory/Inventory.types';
 import { api } from 'app/percona/shared/helpers/api';
 
 import { BackupLogResponse, BackupLogs, DataModel } from '../../Backup.types';
 
-import { Backup, BackupResponse } from './BackupInventory.types';
+import { Backup, BackupResponse, Timeranges, TimerangesResponse } from './BackupInventory.types';
+import { formatDate } from './BackupInventory.utils';
 
 const BASE_URL = '/v1/management/backup';
 
@@ -40,12 +42,22 @@ export const BackupInventoryService = {
       })
     );
   },
-  async restore(serviceId: string, artifactId: string, token?: CancelToken) {
+  async listPitrTimeranges(artifactId: string): Promise<Array<SelectableValue<Timeranges>>> {
+    const { timeranges = [] } = await api.post<TimerangesResponse, Object>(`${BASE_URL}/Artifacts/ListPITRTimeranges`, {
+      artifact_id: artifactId,
+    });
+    return timeranges.map((value) => ({
+      label: `${formatDate(value.start_timestamp)} / ${formatDate(value.end_timestamp)}`,
+      value: { startTimestamp: value.start_timestamp, endTimestamp: value.end_timestamp },
+    }));
+  },
+  async restore(serviceId: string, artifactId: string, pitrTimestamp?: string, token?: CancelToken) {
     return api.post(
       `${BASE_URL}/Backups/Restore`,
       {
         service_id: serviceId,
         artifact_id: artifactId,
+        pitr_timestamp: pitrTimestamp,
       },
       false,
       token
diff --git a/public/app/percona/backup/components/BackupInventory/BackupInventory.tsx b/public/app/percona/backup/components/BackupInventory/BackupInventory.tsx
index 925ca333a2c66..b857834b188df 100644
--- a/public/app/percona/backup/components/BackupInventory/BackupInventory.tsx
+++ b/public/app/percona/backup/components/BackupInventory/BackupInventory.tsx
@@ -149,9 +149,9 @@ export const BackupInventory: FC = () => {
     setLogsModalVisible(false);
   };
 
-  const handleRestore = async (serviceId: string, artifactId: string) => {
+  const handleRestore = async (serviceId: string, artifactId: string, pitrTimestamp?: string) => {
     try {
-      await BackupInventoryService.restore(serviceId, artifactId, generateToken(RESTORE_CANCEL_TOKEN));
+      await BackupInventoryService.restore(serviceId, artifactId, pitrTimestamp, generateToken(RESTORE_CANCEL_TOKEN));
       setRestoreErrors([]);
       setRestoreModalVisible(false);
     } catch (e) {
diff --git a/public/app/percona/backup/components/BackupInventory/BackupInventory.types.ts b/public/app/percona/backup/components/BackupInventory/BackupInventory.types.ts
index 67a0333506b20..bbaa0bc2140d4 100644
--- a/public/app/percona/backup/components/BackupInventory/BackupInventory.types.ts
+++ b/public/app/percona/backup/components/BackupInventory/BackupInventory.types.ts
@@ -32,3 +32,17 @@ export interface RawBackup {
 export interface BackupResponse {
   artifacts: RawBackup[];
 }
+
+export interface RawTimeranges {
+  start_timestamp: string;
+  end_timestamp: string;
+}
+
+export interface Timeranges {
+  startTimestamp: string;
+  endTimestamp: string;
+}
+
+export interface TimerangesResponse {
+  timeranges: RawTimeranges[];
+}
diff --git a/public/app/percona/backup/components/BackupInventory/BackupInventory.utils.ts b/public/app/percona/backup/components/BackupInventory/BackupInventory.utils.ts
new file mode 100644
index 0000000000000..4290c4a9c2ab8
--- /dev/null
+++ b/public/app/percona/backup/components/BackupInventory/BackupInventory.utils.ts
@@ -0,0 +1,7 @@
+import moment from 'moment/moment';
+
+import { DAY_FORMAT, HOUR_FORMAT } from './BackupInventory.constants';
+
+export const formatDate = (value: string) => {
+  return moment(value).format(DAY_FORMAT + ' ' + HOUR_FORMAT);
+};
diff --git a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.messages.ts b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.messages.ts
index 98e05159a09f3..6f646728577c2 100644
--- a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.messages.ts
+++ b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.messages.ts
@@ -1,6 +1,7 @@
 export const Messages = {
   title: 'Restore from backup',
   serviceSelection: 'Service selection',
+  timeRange: 'Time range',
   vendor: 'Vendor',
   serviceName: 'Service name',
   dataModel: 'Data model',
diff --git a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.styles.ts b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.styles.ts
index eccb5f84690f7..d4a89ed129bfa 100644
--- a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.styles.ts
+++ b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.styles.ts
@@ -1,29 +1,19 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme } from '@grafana/data';
-
-export const getStyles = ({ palette, typography, spacing }: GrafanaTheme) => ({
-  formHalvesContainer: css`
-    display: flex;
-    margin-bottom: ${spacing.formInputMargin};
+import { GrafanaTheme2 } from '@grafana/data';
 
+export const getStyles = ({ v1: { palette, typography, spacing } }: GrafanaTheme2) => ({
+  modalWrapper: css`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-content: center;
+    align-items: center;
+    gap: 0px ${spacing.sm};
     & > div {
-      flex: 0 1 50%;
-
-      &:first-child {
-        padding-right: ${spacing.md};
-      }
-
-      &:last-child {
-        padding-left: ${spacing.md};
-      }
+      height: 100%;
     }
   `,
   radioGroup: css`
-    & > div:nth-last-of-type(2) {
-      flex-wrap: nowrap;
-    }
-
     & input[type='radio'] + label {
       height: auto;
       white-space: nowrap;
diff --git a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.tsx b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.tsx
index f9b1bf2dd49af..a2a37bba7b300 100644
--- a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.tsx
+++ b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.tsx
@@ -1,19 +1,29 @@
 import { Modal, LoaderButton, RadioButtonGroupField, TextInputField, validators } from '@percona/platform-core';
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Field, withTypes } from 'react-final-form';
 
-import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, useStyles } from '@grafana/ui';
+import { DateTime, SelectableValue, toUtc } from '@grafana/data';
+import { Button, DateTimePicker, HorizontalGroup, useStyles2 } from '@grafana/ui';
+import { BackupMode } from 'app/percona/backup/Backup.types';
 import { AsyncSelectField } from 'app/percona/shared/components/Form/AsyncSelectField';
+import { Label } from 'app/percona/shared/components/Form/Label';
 import { Databases, DATABASE_LABELS } from 'app/percona/shared/core';
 
 import { BackupErrorSection } from '../../BackupErrorSection/BackupErrorSection';
+import { BackupInventoryService } from '../BackupInventory.service';
+import { Timeranges } from '../BackupInventory.types';
 
 import { Messages } from './RestoreBackupModal.messages';
 import { RestoreBackupModalService } from './RestoreBackupModal.service';
 import { getStyles } from './RestoreBackupModal.styles';
 import { RestoreBackupModalProps, RestoreBackupFormProps, ServiceTypeSelect } from './RestoreBackupModal.types';
-import { toFormProps } from './RestoreBackupModal.utils';
+import {
+  getHoursFromDate,
+  getMinutesFromDate,
+  getSecondsFromDate,
+  isSameDayFromDate,
+  toFormProps,
+} from './RestoreBackupModal.utils';
 
 const { Form } = withTypes<RestoreBackupFormProps>();
 
@@ -36,15 +46,167 @@ export const RestoreBackupModal: FC<RestoreBackupModalProps> = ({
   onClose,
   onRestore,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const initialValues = useMemo(() => (backup ? toFormProps(backup) : undefined), [backup]);
+
+  const [selectedTimerange, setSelectedTimerange] = useState<Timeranges>();
+  const [selectedTimerangeFromDatepicker, setSelectedTimerangeFromDatepicker] = useState<DateTime>();
+  const [selectedDay, setSelectedDay] = useState<Date | undefined>();
+
+  const isSameStartDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return isSameDayFromDate(selectedDay, selectedTimerange.startTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const isSameEndDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return isSameDayFromDate(selectedDay, selectedTimerange.endTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const hoursFromStartDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getHoursFromDate(selectedTimerange.startTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const hoursFromEndDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getHoursFromDate(selectedTimerange.endTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const minutesFromStartDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getMinutesFromDate(selectedTimerange.startTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const minutesFromEndDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getMinutesFromDate(selectedTimerange.endTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const secondsFromStartDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getSecondsFromDate(selectedTimerange.startTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
+  const secondsFromEndDate = useMemo(() => {
+    if (selectedDay && selectedTimerange) {
+      return getSecondsFromDate(selectedTimerange.endTimestamp);
+    }
+    return false;
+  }, [selectedDay, selectedTimerange]);
+
   const handleSubmit = ({ serviceType, service }: RestoreBackupFormProps) => {
     if (backup) {
       const serviceId = serviceType === ServiceTypeSelect.SAME ? backup.serviceId : service.value;
-      onRestore(serviceId || '', backup.id);
+      if (backup.mode === BackupMode.PITR && selectedTimerangeFromDatepicker) {
+        onRestore(serviceId || '', backup.id, selectedTimerangeFromDatepicker.toISOString());
+      } else {
+        onRestore(serviceId || '', backup.id);
+      }
     }
   };
 
+  const calculateDisableHours = useCallback(() => {
+    const disabledHours = [];
+    for (let i = 0; i < 24; i++) {
+      if (isSameStartDate) {
+        if (i < hoursFromStartDate) {
+          disabledHours.push(i);
+        }
+      }
+      if (isSameEndDate) {
+        if (i > hoursFromEndDate) {
+          disabledHours.push(i);
+        }
+      }
+    }
+    return disabledHours;
+  }, [hoursFromEndDate, hoursFromStartDate, isSameEndDate, isSameStartDate]);
+
+  const calculateDisableMinutes = useCallback(
+    (hour) => {
+      const disabledMinutes = [];
+      for (let i = 0; i < 60; i++) {
+        if (isSameStartDate && hour === hoursFromStartDate) {
+          if (i < minutesFromStartDate) {
+            disabledMinutes.push(i);
+          }
+        }
+        if (isSameEndDate && hour === hoursFromEndDate) {
+          if (i > minutesFromEndDate) {
+            disabledMinutes.push(i);
+          }
+        }
+      }
+      return disabledMinutes;
+    },
+    [hoursFromEndDate, hoursFromStartDate, isSameEndDate, isSameStartDate, minutesFromEndDate, minutesFromStartDate]
+  );
+
+  const calculateDisableSeconds = useCallback(
+    (hour, minute) => {
+      const disabledSeconds = [];
+
+      for (let i = 0; i < 60; i++) {
+        if (isSameStartDate && hour === hoursFromStartDate && minute === minutesFromStartDate) {
+          if (i < secondsFromStartDate) {
+            disabledSeconds.push(i);
+          }
+        }
+        if (isSameEndDate && hour === hoursFromEndDate && minute === minutesFromEndDate) {
+          if (i > secondsFromEndDate) {
+            disabledSeconds.push(i);
+          }
+        }
+      }
+      return disabledSeconds;
+    },
+    [
+      hoursFromEndDate,
+      hoursFromStartDate,
+      isSameEndDate,
+      isSameStartDate,
+      minutesFromEndDate,
+      minutesFromStartDate,
+      secondsFromEndDate,
+      secondsFromStartDate,
+    ]
+  );
+
+  useEffect(() => {
+    if (selectedTimerange && selectedDay) {
+      const { startTimestamp, endTimestamp } = selectedTimerange;
+      if (isSameStartDate) {
+        setSelectedTimerangeFromDatepicker(toUtc(startTimestamp));
+      }
+      if (isSameEndDate) {
+        setSelectedTimerangeFromDatepicker(toUtc(endTimestamp));
+      }
+    }
+  }, [isSameEndDate, isSameStartDate, selectedDay, selectedTimerange]);
+
+  useEffect(() => {
+    if (selectedTimerange) {
+      const { endTimestamp } = selectedTimerange;
+      setSelectedDay(new Date(endTimestamp));
+      setSelectedTimerangeFromDatepicker(toUtc(endTimestamp));
+    }
+  }, [selectedTimerange]);
+
   return (
     <Modal isVisible={isVisible} title={Messages.title} onClose={onClose}>
       <Form
@@ -52,35 +214,74 @@ export const RestoreBackupModal: FC<RestoreBackupModalProps> = ({
         onSubmit={handleSubmit}
         render={({ handleSubmit, valid, submitting, values }) => (
           <form onSubmit={handleSubmit}>
-            <div className={styles.formHalvesContainer}>
-              <div>
-                <RadioButtonGroupField
-                  className={styles.radioGroup}
-                  options={serviceTypeOptions}
-                  name="serviceType"
-                  label={Messages.serviceSelection}
-                  fullWidth
-                  disabled={values.vendor !== DATABASE_LABELS[Databases.mysql]}
-                />
-                <TextInputField disabled name="vendor" label={Messages.vendor} />
-              </div>
-              <div>
-                <Field name="service" validate={validators.required}>
-                  {({ input }) => (
-                    <div>
-                      <AsyncSelectField
-                        label={Messages.serviceName}
-                        disabled={values.serviceType === ServiceTypeSelect.SAME}
-                        loadOptions={() => RestoreBackupModalService.loadLocationOptions(backup!.id)}
-                        defaultOptions
-                        {...input}
-                        data-testid="service-select-input"
-                      />
-                    </div>
-                  )}
-                </Field>
-                <TextInputField disabled name="dataModel" label={Messages.dataModel} />
-              </div>
+            <div className={styles.modalWrapper}>
+              {backup?.mode === BackupMode.PITR && (
+                <>
+                  <Field name="timerange" validate={validators.required}>
+                    {({ input }) => (
+                      <div>
+                        <AsyncSelectField
+                          label={Messages.timeRange}
+                          loadOptions={() => BackupInventoryService.listPitrTimeranges(backup!.id)}
+                          {...input}
+                          defaultOptions
+                          data-testid="time-range-select-input"
+                          onChange={(e) => {
+                            setSelectedTimerange(e.value);
+                            input.onChange(e);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </Field>
+                </>
+              )}
+              {selectedTimerange && (
+                <div>
+                  <Label label="test" />
+                  <DateTimePicker
+                    date={selectedTimerangeFromDatepicker}
+                    onChange={setSelectedTimerangeFromDatepicker}
+                    calendarProps={{
+                      minDate: new Date(selectedTimerange.startTimestamp),
+                      maxDate: new Date(selectedTimerange.endTimestamp),
+                      onClickDay: setSelectedDay,
+                    }}
+                    timepickerProps={{
+                      disabledHours: calculateDisableHours,
+                      disabledMinutes: calculateDisableMinutes,
+                      disabledSeconds: calculateDisableSeconds,
+                      hideDisabledOptions: true,
+                    }}
+                  />
+                </div>
+              )}
+              <RadioButtonGroupField
+                className={styles.radioGroup}
+                options={serviceTypeOptions}
+                name="serviceType"
+                label={Messages.serviceSelection}
+                fullWidth
+                disabled={values.vendor !== DATABASE_LABELS[Databases.mysql]}
+              />
+              <TextInputField disabled name="vendor" label={Messages.vendor} />
+
+              <Field name="service" validate={validators.required}>
+                {({ input }) => (
+                  <div>
+                    <AsyncSelectField
+                      label={Messages.serviceName}
+                      disabled={values.serviceType === ServiceTypeSelect.SAME}
+                      loadOptions={() => RestoreBackupModalService.loadLocationOptions(backup!.id)}
+                      defaultOptions
+                      {...input}
+                      data-testid="service-select-input"
+                    />
+                  </div>
+                )}
+              </Field>
+
+              <TextInputField disabled name="dataModel" label={Messages.dataModel} />
             </div>
             {!!restoreErrors.length && <BackupErrorSection backupErrors={restoreErrors} />}
             <HorizontalGroup justify="center" spacing="md">
diff --git a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.types.ts b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.types.ts
index 76380d1234222..0e6c88d931cf2 100644
--- a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.types.ts
+++ b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.types.ts
@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { ApiVerboseError } from 'app/percona/shared/core';
 
-import { Backup } from '../BackupInventory.types';
+import { Backup, Timeranges } from '../BackupInventory.types';
 
 export interface RestoreBackupModalProps {
   isVisible: boolean;
@@ -9,7 +9,7 @@ export interface RestoreBackupModalProps {
   noService?: boolean;
   restoreErrors?: ApiVerboseError[];
   onClose: () => void;
-  onRestore: (serviceId: string, artifactId: string) => void;
+  onRestore: (serviceId: string, artifactId: string, pitrTimestamp?: string) => void;
 }
 
 export interface RestoreBackupFormProps {
@@ -17,6 +17,7 @@ export interface RestoreBackupFormProps {
   vendor: string;
   service: SelectableValue<string>;
   dataModel: string;
+  timerange?: Timeranges;
 }
 
 export enum ServiceTypeSelect {
diff --git a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.utils.ts b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.utils.ts
index 6d84e896b2568..733147d41b1e3 100644
--- a/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.utils.ts
+++ b/public/app/percona/backup/components/BackupInventory/RestoreBackupModal/RestoreBackupModal.utils.ts
@@ -1,3 +1,5 @@
+import { getHours, getMinutes, getSeconds, isSameDay } from 'date-fns';
+
 import { formatDataModel } from 'app/percona/backup/Backup.utils';
 import { DATABASE_LABELS } from 'app/percona/shared/core';
 
@@ -13,3 +15,10 @@ export const toFormProps: ToFormProps = ({ vendor, serviceId, serviceName, dataM
   service: { label: serviceName, value: serviceId },
   dataModel: formatDataModel(dataModel),
 });
+
+export const isSameDayFromDate = (firstDay: Date | string, secondDay: Date | string) =>
+  isSameDay(new Date(firstDay), new Date(secondDay));
+
+export const getHoursFromDate = (date: string) => getHours(new Date(date));
+export const getMinutesFromDate = (date: string) => getMinutes(new Date(date));
+export const getSecondsFromDate = (date: string) => getSeconds(new Date(date));