diff --git a/studio/components/interfaces/Database/Backups/PITR/PITR.constants.ts b/studio/components/interfaces/Database/Backups/PITR/PITR.constants.ts
new file mode 100644
index 00000000000..bf1877b267c
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITR.constants.ts
@@ -0,0 +1,1196 @@
+// https://github.com/dmfilipenko/timezones.json/blob/master/timezones.json
+export const ALL_TIMEZONES = [
+  {
+    value: 'Dateline Standard Time',
+    abbr: 'DST',
+    offset: -12,
+    isdst: false,
+    text: '(UTC-12:00) International Date Line West',
+    utc: ['Etc/GMT+12'],
+  },
+  {
+    value: 'UTC-11',
+    abbr: 'U',
+    offset: -11,
+    isdst: false,
+    text: '(UTC-11:00) Coordinated Universal Time-11',
+    utc: ['Etc/GMT+11', 'Pacific/Midway', 'Pacific/Niue', 'Pacific/Pago_Pago'],
+  },
+  {
+    value: 'Hawaiian Standard Time',
+    abbr: 'HST',
+    offset: -10,
+    isdst: false,
+    text: '(UTC-10:00) Hawaii',
+    utc: [
+      'Etc/GMT+10',
+      'Pacific/Honolulu',
+      'Pacific/Johnston',
+      'Pacific/Rarotonga',
+      'Pacific/Tahiti',
+    ],
+  },
+  {
+    value: 'Alaskan Standard Time',
+    abbr: 'AKDT',
+    offset: -8,
+    isdst: true,
+    text: '(UTC-09:00) Alaska',
+    utc: [
+      'America/Anchorage',
+      'America/Juneau',
+      'America/Nome',
+      'America/Sitka',
+      'America/Yakutat',
+    ],
+  },
+  {
+    value: 'Pacific Standard Time (Mexico)',
+    abbr: 'PDT',
+    offset: -7,
+    isdst: true,
+    text: '(UTC-08:00) Baja California',
+    utc: ['America/Santa_Isabel'],
+  },
+  {
+    value: 'Pacific Daylight Time',
+    abbr: 'PDT',
+    offset: -7,
+    isdst: true,
+    text: '(UTC-07:00) Pacific Daylight Time (US & Canada)',
+    utc: ['America/Los_Angeles', 'America/Tijuana', 'America/Vancouver'],
+  },
+  {
+    value: 'Pacific Standard Time',
+    abbr: 'PST',
+    offset: -8,
+    isdst: false,
+    text: '(UTC-08:00) Pacific Standard Time (US & Canada)',
+    utc: ['America/Los_Angeles', 'America/Tijuana', 'America/Vancouver', 'PST8PDT'],
+  },
+  {
+    value: 'US Mountain Standard Time',
+    abbr: 'UMST',
+    offset: -7,
+    isdst: false,
+    text: '(UTC-07:00) Arizona',
+    utc: [
+      'America/Creston',
+      'America/Dawson',
+      'America/Dawson_Creek',
+      'America/Hermosillo',
+      'America/Phoenix',
+      'America/Whitehorse',
+      'Etc/GMT+7',
+    ],
+  },
+  {
+    value: 'Mountain Standard Time (Mexico)',
+    abbr: 'MDT',
+    offset: -6,
+    isdst: true,
+    text: '(UTC-07:00) Chihuahua, La Paz, Mazatlan',
+    utc: ['America/Chihuahua', 'America/Mazatlan'],
+  },
+  {
+    value: 'Mountain Standard Time',
+    abbr: 'MDT',
+    offset: -6,
+    isdst: true,
+    text: '(UTC-07:00) Mountain Time (US & Canada)',
+    utc: [
+      'America/Boise',
+      'America/Cambridge_Bay',
+      'America/Denver',
+      'America/Edmonton',
+      'America/Inuvik',
+      'America/Ojinaga',
+      'America/Yellowknife',
+      'MST7MDT',
+    ],
+  },
+  {
+    value: 'Central America Standard Time',
+    abbr: 'CAST',
+    offset: -6,
+    isdst: false,
+    text: '(UTC-06:00) Central America',
+    utc: [
+      'America/Belize',
+      'America/Costa_Rica',
+      'America/El_Salvador',
+      'America/Guatemala',
+      'America/Managua',
+      'America/Tegucigalpa',
+      'Etc/GMT+6',
+      'Pacific/Galapagos',
+    ],
+  },
+  {
+    value: 'Central Standard Time',
+    abbr: 'CDT',
+    offset: -5,
+    isdst: true,
+    text: '(UTC-06:00) Central Time (US & Canada)',
+    utc: [
+      'America/Chicago',
+      'America/Indiana/Knox',
+      'America/Indiana/Tell_City',
+      'America/Matamoros',
+      'America/Menominee',
+      'America/North_Dakota/Beulah',
+      'America/North_Dakota/Center',
+      'America/North_Dakota/New_Salem',
+      'America/Rainy_River',
+      'America/Rankin_Inlet',
+      'America/Resolute',
+      'America/Winnipeg',
+      'CST6CDT',
+    ],
+  },
+  {
+    value: 'Central Standard Time (Mexico)',
+    abbr: 'CDT',
+    offset: -5,
+    isdst: true,
+    text: '(UTC-06:00) Guadalajara, Mexico City, Monterrey',
+    utc: [
+      'America/Bahia_Banderas',
+      'America/Cancun',
+      'America/Merida',
+      'America/Mexico_City',
+      'America/Monterrey',
+    ],
+  },
+  {
+    value: 'Canada Central Standard Time',
+    abbr: 'CCST',
+    offset: -6,
+    isdst: false,
+    text: '(UTC-06:00) Saskatchewan',
+    utc: ['America/Regina', 'America/Swift_Current'],
+  },
+  {
+    value: 'SA Pacific Standard Time',
+    abbr: 'SPST',
+    offset: -5,
+    isdst: false,
+    text: '(UTC-05:00) Bogota, Lima, Quito',
+    utc: [
+      'America/Bogota',
+      'America/Cayman',
+      'America/Coral_Harbour',
+      'America/Eirunepe',
+      'America/Guayaquil',
+      'America/Jamaica',
+      'America/Lima',
+      'America/Panama',
+      'America/Rio_Branco',
+      'Etc/GMT+5',
+    ],
+  },
+  {
+    value: 'Eastern Standard Time',
+    abbr: 'EST',
+    offset: -5,
+    isdst: false,
+    text: '(UTC-05:00) Eastern Time (US & Canada)',
+    utc: [
+      'America/Detroit',
+      'America/Havana',
+      'America/Indiana/Petersburg',
+      'America/Indiana/Vincennes',
+      'America/Indiana/Winamac',
+      'America/Iqaluit',
+      'America/Kentucky/Monticello',
+      'America/Louisville',
+      'America/Montreal',
+      'America/Nassau',
+      'America/New_York',
+      'America/Nipigon',
+      'America/Pangnirtung',
+      'America/Port-au-Prince',
+      'America/Thunder_Bay',
+      'America/Toronto',
+    ],
+  },
+  {
+    value: 'Eastern Daylight Time',
+    abbr: 'EDT',
+    offset: -4,
+    isdst: true,
+    text: '(UTC-04:00) Eastern Daylight Time (US & Canada)',
+    utc: [
+      'America/Detroit',
+      'America/Havana',
+      'America/Indiana/Petersburg',
+      'America/Indiana/Vincennes',
+      'America/Indiana/Winamac',
+      'America/Iqaluit',
+      'America/Kentucky/Monticello',
+      'America/Louisville',
+      'America/Montreal',
+      'America/Nassau',
+      'America/New_York',
+      'America/Nipigon',
+      'America/Pangnirtung',
+      'America/Port-au-Prince',
+      'America/Thunder_Bay',
+      'America/Toronto',
+    ],
+  },
+  {
+    value: 'US Eastern Standard Time',
+    abbr: 'UEDT',
+    offset: -5,
+    isdst: false,
+    text: '(UTC-05:00) Indiana (East)',
+    utc: ['America/Indiana/Marengo', 'America/Indiana/Vevay', 'America/Indianapolis'],
+  },
+  {
+    value: 'Venezuela Standard Time',
+    abbr: 'VST',
+    offset: -4.5,
+    isdst: false,
+    text: '(UTC-04:30) Caracas',
+    utc: ['America/Caracas'],
+  },
+  {
+    value: 'Paraguay Standard Time',
+    abbr: 'PYT',
+    offset: -4,
+    isdst: false,
+    text: '(UTC-04:00) Asuncion',
+    utc: ['America/Asuncion'],
+  },
+  {
+    value: 'Atlantic Standard Time',
+    abbr: 'ADT',
+    offset: -3,
+    isdst: true,
+    text: '(UTC-04:00) Atlantic Time (Canada)',
+    utc: [
+      'America/Glace_Bay',
+      'America/Goose_Bay',
+      'America/Halifax',
+      'America/Moncton',
+      'America/Thule',
+      'Atlantic/Bermuda',
+    ],
+  },
+  {
+    value: 'Central Brazilian Standard Time',
+    abbr: 'CBST',
+    offset: -4,
+    isdst: false,
+    text: '(UTC-04:00) Cuiaba',
+    utc: ['America/Campo_Grande', 'America/Cuiaba'],
+  },
+  {
+    value: 'SA Western Standard Time',
+    abbr: 'SWST',
+    offset: -4,
+    isdst: false,
+    text: '(UTC-04:00) Georgetown, La Paz, Manaus, San Juan',
+    utc: [
+      'America/Anguilla',
+      'America/Antigua',
+      'America/Aruba',
+      'America/Barbados',
+      'America/Blanc-Sablon',
+      'America/Boa_Vista',
+      'America/Curacao',
+      'America/Dominica',
+      'America/Grand_Turk',
+      'America/Grenada',
+      'America/Guadeloupe',
+      'America/Guyana',
+      'America/Kralendijk',
+      'America/La_Paz',
+      'America/Lower_Princes',
+      'America/Manaus',
+      'America/Marigot',
+      'America/Martinique',
+      'America/Montserrat',
+      'America/Port_of_Spain',
+      'America/Porto_Velho',
+      'America/Puerto_Rico',
+      'America/Santo_Domingo',
+      'America/St_Barthelemy',
+      'America/St_Kitts',
+      'America/St_Lucia',
+      'America/St_Thomas',
+      'America/St_Vincent',
+      'America/Tortola',
+      'Etc/GMT+4',
+    ],
+  },
+  {
+    value: 'Pacific SA Standard Time',
+    abbr: 'PSST',
+    offset: -4,
+    isdst: false,
+    text: '(UTC-04:00) Santiago',
+    utc: ['America/Santiago', 'Antarctica/Palmer'],
+  },
+  {
+    value: 'Newfoundland Standard Time',
+    abbr: 'NDT',
+    offset: -2.5,
+    isdst: true,
+    text: '(UTC-03:30) Newfoundland',
+    utc: ['America/St_Johns'],
+  },
+  {
+    value: 'E. South America Standard Time',
+    abbr: 'ESAST',
+    offset: -3,
+    isdst: false,
+    text: '(UTC-03:00) Brasilia',
+    utc: ['America/Sao_Paulo'],
+  },
+  {
+    value: 'Argentina Standard Time',
+    abbr: 'AST',
+    offset: -3,
+    isdst: false,
+    text: '(UTC-03:00) Buenos Aires',
+    utc: [
+      'America/Argentina/La_Rioja',
+      'America/Argentina/Rio_Gallegos',
+      'America/Argentina/Salta',
+      'America/Argentina/San_Juan',
+      'America/Argentina/San_Luis',
+      'America/Argentina/Tucuman',
+      'America/Argentina/Ushuaia',
+      'America/Buenos_Aires',
+      'America/Catamarca',
+      'America/Cordoba',
+      'America/Jujuy',
+      'America/Mendoza',
+    ],
+  },
+  {
+    value: 'SA Eastern Standard Time',
+    abbr: 'SEST',
+    offset: -3,
+    isdst: false,
+    text: '(UTC-03:00) Cayenne, Fortaleza',
+    utc: [
+      'America/Araguaina',
+      'America/Belem',
+      'America/Cayenne',
+      'America/Fortaleza',
+      'America/Maceio',
+      'America/Paramaribo',
+      'America/Recife',
+      'America/Santarem',
+      'Antarctica/Rothera',
+      'Atlantic/Stanley',
+      'Etc/GMT+3',
+    ],
+  },
+  {
+    value: 'Greenland Standard Time',
+    abbr: 'GDT',
+    offset: -3,
+    isdst: true,
+    text: '(UTC-03:00) Greenland',
+    utc: ['America/Godthab'],
+  },
+  {
+    value: 'Montevideo Standard Time',
+    abbr: 'MST',
+    offset: -3,
+    isdst: false,
+    text: '(UTC-03:00) Montevideo',
+    utc: ['America/Montevideo'],
+  },
+  {
+    value: 'Bahia Standard Time',
+    abbr: 'BST',
+    offset: -3,
+    isdst: false,
+    text: '(UTC-03:00) Salvador',
+    utc: ['America/Bahia'],
+  },
+  {
+    value: 'UTC-02',
+    abbr: 'U',
+    offset: -2,
+    isdst: false,
+    text: '(UTC-02:00) Coordinated Universal Time-02',
+    utc: ['America/Noronha', 'Atlantic/South_Georgia', 'Etc/GMT+2'],
+  },
+  {
+    value: 'Mid-Atlantic Standard Time',
+    abbr: 'MDT',
+    offset: -1,
+    isdst: true,
+    text: '(UTC-02:00) Mid-Atlantic - Old',
+    utc: [],
+  },
+  {
+    value: 'Azores Standard Time',
+    abbr: 'ADT',
+    offset: 0,
+    isdst: true,
+    text: '(UTC-01:00) Azores',
+    utc: ['America/Scoresbysund', 'Atlantic/Azores'],
+  },
+  {
+    value: 'Cape Verde Standard Time',
+    abbr: 'CVST',
+    offset: -1,
+    isdst: false,
+    text: '(UTC-01:00) Cape Verde Is.',
+    utc: ['Atlantic/Cape_Verde', 'Etc/GMT+1'],
+  },
+  {
+    value: 'Morocco Standard Time',
+    abbr: 'MDT',
+    offset: 1,
+    isdst: true,
+    text: '(UTC) Casablanca',
+    utc: ['Africa/Casablanca', 'Africa/El_Aaiun'],
+  },
+  {
+    value: 'UTC',
+    abbr: 'UTC',
+    offset: 0,
+    isdst: false,
+    text: '(UTC) Coordinated Universal Time',
+    utc: ['America/Danmarkshavn', 'Etc/GMT'],
+  },
+  {
+    value: 'British Summer Time',
+    abbr: 'BST',
+    offset: 1,
+    isdst: true,
+    text: '(UTC+01:00) Edinburgh, London',
+    utc: ['Europe/Isle_of_Man', 'Europe/Guernsey', 'Europe/Jersey', 'Europe/London'],
+  },
+  {
+    value: 'GMT Standard Time',
+    abbr: 'GDT',
+    offset: 1,
+    isdst: true,
+    text: '(UTC) Dublin, Lisbon',
+    utc: [
+      'Atlantic/Canary',
+      'Atlantic/Faeroe',
+      'Atlantic/Madeira',
+      'Europe/Dublin',
+      'Europe/Lisbon',
+    ],
+  },
+  {
+    value: 'Greenwich Standard Time',
+    abbr: 'GST',
+    offset: 0,
+    isdst: false,
+    text: '(UTC) Monrovia, Reykjavik',
+    utc: [
+      'Africa/Abidjan',
+      'Africa/Accra',
+      'Africa/Bamako',
+      'Africa/Banjul',
+      'Africa/Bissau',
+      'Africa/Conakry',
+      'Africa/Dakar',
+      'Africa/Freetown',
+      'Africa/Lome',
+      'Africa/Monrovia',
+      'Africa/Nouakchott',
+      'Africa/Ouagadougou',
+      'Africa/Sao_Tome',
+      'Atlantic/Reykjavik',
+      'Atlantic/St_Helena',
+    ],
+  },
+  {
+    value: 'W. Europe Standard Time',
+    abbr: 'WEDT',
+    offset: 2,
+    isdst: true,
+    text: '(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna',
+    utc: [
+      'Arctic/Longyearbyen',
+      'Europe/Amsterdam',
+      'Europe/Andorra',
+      'Europe/Berlin',
+      'Europe/Busingen',
+      'Europe/Gibraltar',
+      'Europe/Luxembourg',
+      'Europe/Malta',
+      'Europe/Monaco',
+      'Europe/Oslo',
+      'Europe/Rome',
+      'Europe/San_Marino',
+      'Europe/Stockholm',
+      'Europe/Vaduz',
+      'Europe/Vatican',
+      'Europe/Vienna',
+      'Europe/Zurich',
+    ],
+  },
+  {
+    value: 'Central Europe Standard Time',
+    abbr: 'CEDT',
+    offset: 2,
+    isdst: true,
+    text: '(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague',
+    utc: [
+      'Europe/Belgrade',
+      'Europe/Bratislava',
+      'Europe/Budapest',
+      'Europe/Ljubljana',
+      'Europe/Podgorica',
+      'Europe/Prague',
+      'Europe/Tirane',
+    ],
+  },
+  {
+    value: 'Romance Standard Time',
+    abbr: 'RDT',
+    offset: 2,
+    isdst: true,
+    text: '(UTC+01:00) Brussels, Copenhagen, Madrid, Paris',
+    utc: ['Africa/Ceuta', 'Europe/Brussels', 'Europe/Copenhagen', 'Europe/Madrid', 'Europe/Paris'],
+  },
+  {
+    value: 'Central European Standard Time',
+    abbr: 'CEDT',
+    offset: 2,
+    isdst: true,
+    text: '(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb',
+    utc: ['Europe/Sarajevo', 'Europe/Skopje', 'Europe/Warsaw', 'Europe/Zagreb'],
+  },
+  {
+    value: 'W. Central Africa Standard Time',
+    abbr: 'WCAST',
+    offset: 1,
+    isdst: false,
+    text: '(UTC+01:00) West Central Africa',
+    utc: [
+      'Africa/Algiers',
+      'Africa/Bangui',
+      'Africa/Brazzaville',
+      'Africa/Douala',
+      'Africa/Kinshasa',
+      'Africa/Lagos',
+      'Africa/Libreville',
+      'Africa/Luanda',
+      'Africa/Malabo',
+      'Africa/Ndjamena',
+      'Africa/Niamey',
+      'Africa/Porto-Novo',
+      'Africa/Tunis',
+      'Etc/GMT-1',
+    ],
+  },
+  {
+    value: 'Namibia Standard Time',
+    abbr: 'NST',
+    offset: 1,
+    isdst: false,
+    text: '(UTC+01:00) Windhoek',
+    utc: ['Africa/Windhoek'],
+  },
+  {
+    value: 'GTB Standard Time',
+    abbr: 'GDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) Athens, Bucharest',
+    utc: ['Asia/Nicosia', 'Europe/Athens', 'Europe/Bucharest', 'Europe/Chisinau'],
+  },
+  {
+    value: 'Middle East Standard Time',
+    abbr: 'MEDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) Beirut',
+    utc: ['Asia/Beirut'],
+  },
+  {
+    value: 'Egypt Standard Time',
+    abbr: 'EST',
+    offset: 2,
+    isdst: false,
+    text: '(UTC+02:00) Cairo',
+    utc: ['Africa/Cairo'],
+  },
+  {
+    value: 'Syria Standard Time',
+    abbr: 'SDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) Damascus',
+    utc: ['Asia/Damascus'],
+  },
+  {
+    value: 'E. Europe Standard Time',
+    abbr: 'EEDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) E. Europe',
+    utc: [
+      'Asia/Nicosia',
+      'Europe/Athens',
+      'Europe/Bucharest',
+      'Europe/Chisinau',
+      'Europe/Helsinki',
+      'Europe/Kiev',
+      'Europe/Mariehamn',
+      'Europe/Nicosia',
+      'Europe/Riga',
+      'Europe/Sofia',
+      'Europe/Tallinn',
+      'Europe/Uzhgorod',
+      'Europe/Vilnius',
+      'Europe/Zaporozhye',
+    ],
+  },
+  {
+    value: 'South Africa Standard Time',
+    abbr: 'SAST',
+    offset: 2,
+    isdst: false,
+    text: '(UTC+02:00) Harare, Pretoria',
+    utc: [
+      'Africa/Blantyre',
+      'Africa/Bujumbura',
+      'Africa/Gaborone',
+      'Africa/Harare',
+      'Africa/Johannesburg',
+      'Africa/Kigali',
+      'Africa/Lubumbashi',
+      'Africa/Lusaka',
+      'Africa/Maputo',
+      'Africa/Maseru',
+      'Africa/Mbabane',
+      'Etc/GMT-2',
+    ],
+  },
+  {
+    value: 'FLE Standard Time',
+    abbr: 'FDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius',
+    utc: [
+      'Europe/Helsinki',
+      'Europe/Kiev',
+      'Europe/Mariehamn',
+      'Europe/Riga',
+      'Europe/Sofia',
+      'Europe/Tallinn',
+      'Europe/Uzhgorod',
+      'Europe/Vilnius',
+      'Europe/Zaporozhye',
+    ],
+  },
+  {
+    value: 'Turkey Standard Time',
+    abbr: 'TDT',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Istanbul',
+    utc: ['Europe/Istanbul'],
+  },
+  {
+    value: 'Israel Standard Time',
+    abbr: 'JDT',
+    offset: 3,
+    isdst: true,
+    text: '(UTC+02:00) Jerusalem',
+    utc: ['Asia/Jerusalem'],
+  },
+  {
+    value: 'Libya Standard Time',
+    abbr: 'LST',
+    offset: 2,
+    isdst: false,
+    text: '(UTC+02:00) Tripoli',
+    utc: ['Africa/Tripoli'],
+  },
+  {
+    value: 'Jordan Standard Time',
+    abbr: 'JST',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Amman',
+    utc: ['Asia/Amman'],
+  },
+  {
+    value: 'Arabic Standard Time',
+    abbr: 'AST',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Baghdad',
+    utc: ['Asia/Baghdad'],
+  },
+  {
+    value: 'Kaliningrad Standard Time',
+    abbr: 'KST',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+02:00) Kaliningrad',
+    utc: ['Europe/Kaliningrad'],
+  },
+  {
+    value: 'Arab Standard Time',
+    abbr: 'AST',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Kuwait, Riyadh',
+    utc: ['Asia/Aden', 'Asia/Bahrain', 'Asia/Kuwait', 'Asia/Qatar', 'Asia/Riyadh'],
+  },
+  {
+    value: 'E. Africa Standard Time',
+    abbr: 'EAST',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Nairobi',
+    utc: [
+      'Africa/Addis_Ababa',
+      'Africa/Asmera',
+      'Africa/Dar_es_Salaam',
+      'Africa/Djibouti',
+      'Africa/Juba',
+      'Africa/Kampala',
+      'Africa/Khartoum',
+      'Africa/Mogadishu',
+      'Africa/Nairobi',
+      'Antarctica/Syowa',
+      'Etc/GMT-3',
+      'Indian/Antananarivo',
+      'Indian/Comoro',
+      'Indian/Mayotte',
+    ],
+  },
+  {
+    value: 'Moscow Standard Time',
+    abbr: 'MSK',
+    offset: 3,
+    isdst: false,
+    text: '(UTC+03:00) Moscow, St. Petersburg, Volgograd, Minsk',
+    utc: ['Europe/Kirov', 'Europe/Moscow', 'Europe/Simferopol', 'Europe/Volgograd', 'Europe/Minsk'],
+  },
+  {
+    value: 'Samara Time',
+    abbr: 'SAMT',
+    offset: 4,
+    isdst: false,
+    text: '(UTC+04:00) Samara, Ulyanovsk, Saratov',
+    utc: ['Europe/Astrakhan', 'Europe/Samara', 'Europe/Ulyanovsk'],
+  },
+  {
+    value: 'Iran Standard Time',
+    abbr: 'IDT',
+    offset: 4.5,
+    isdst: true,
+    text: '(UTC+03:30) Tehran',
+    utc: ['Asia/Tehran'],
+  },
+  {
+    value: 'Arabian Standard Time',
+    abbr: 'AST',
+    offset: 4,
+    isdst: false,
+    text: '(UTC+04:00) Abu Dhabi, Muscat',
+    utc: ['Asia/Dubai', 'Asia/Muscat', 'Etc/GMT-4'],
+  },
+  {
+    value: 'Azerbaijan Standard Time',
+    abbr: 'ADT',
+    offset: 5,
+    isdst: true,
+    text: '(UTC+04:00) Baku',
+    utc: ['Asia/Baku'],
+  },
+  {
+    value: 'Mauritius Standard Time',
+    abbr: 'MST',
+    offset: 4,
+    isdst: false,
+    text: '(UTC+04:00) Port Louis',
+    utc: ['Indian/Mahe', 'Indian/Mauritius', 'Indian/Reunion'],
+  },
+  {
+    value: 'Georgian Standard Time',
+    abbr: 'GET',
+    offset: 4,
+    isdst: false,
+    text: '(UTC+04:00) Tbilisi',
+    utc: ['Asia/Tbilisi'],
+  },
+  {
+    value: 'Caucasus Standard Time',
+    abbr: 'CST',
+    offset: 4,
+    isdst: false,
+    text: '(UTC+04:00) Yerevan',
+    utc: ['Asia/Yerevan'],
+  },
+  {
+    value: 'Afghanistan Standard Time',
+    abbr: 'AST',
+    offset: 4.5,
+    isdst: false,
+    text: '(UTC+04:30) Kabul',
+    utc: ['Asia/Kabul'],
+  },
+  {
+    value: 'West Asia Standard Time',
+    abbr: 'WAST',
+    offset: 5,
+    isdst: false,
+    text: '(UTC+05:00) Ashgabat, Tashkent',
+    utc: [
+      'Antarctica/Mawson',
+      'Asia/Aqtau',
+      'Asia/Aqtobe',
+      'Asia/Ashgabat',
+      'Asia/Dushanbe',
+      'Asia/Oral',
+      'Asia/Samarkand',
+      'Asia/Tashkent',
+      'Etc/GMT-5',
+      'Indian/Kerguelen',
+      'Indian/Maldives',
+    ],
+  },
+  {
+    value: 'Yekaterinburg Time',
+    abbr: 'YEKT',
+    offset: 5,
+    isdst: false,
+    text: '(UTC+05:00) Yekaterinburg',
+    utc: ['Asia/Yekaterinburg'],
+  },
+  {
+    value: 'Pakistan Standard Time',
+    abbr: 'PKT',
+    offset: 5,
+    isdst: false,
+    text: '(UTC+05:00) Islamabad, Karachi',
+    utc: ['Asia/Karachi'],
+  },
+  {
+    value: 'India Standard Time',
+    abbr: 'IST',
+    offset: 5.5,
+    isdst: false,
+    text: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi',
+    utc: ['Asia/Kolkata', 'Asia/Calcutta'],
+  },
+  {
+    value: 'Sri Lanka Standard Time',
+    abbr: 'SLST',
+    offset: 5.5,
+    isdst: false,
+    text: '(UTC+05:30) Sri Jayawardenepura',
+    utc: ['Asia/Colombo'],
+  },
+  {
+    value: 'Nepal Standard Time',
+    abbr: 'NST',
+    offset: 5.75,
+    isdst: false,
+    text: '(UTC+05:45) Kathmandu',
+    utc: ['Asia/Kathmandu'],
+  },
+  {
+    value: 'Central Asia Standard Time',
+    abbr: 'CAST',
+    offset: 6,
+    isdst: false,
+    text: '(UTC+06:00) Nur-Sultan (Astana)',
+    utc: [
+      'Antarctica/Vostok',
+      'Asia/Almaty',
+      'Asia/Bishkek',
+      'Asia/Qyzylorda',
+      'Asia/Urumqi',
+      'Etc/GMT-6',
+      'Indian/Chagos',
+    ],
+  },
+  {
+    value: 'Bangladesh Standard Time',
+    abbr: 'BST',
+    offset: 6,
+    isdst: false,
+    text: '(UTC+06:00) Dhaka',
+    utc: ['Asia/Dhaka', 'Asia/Thimphu'],
+  },
+  {
+    value: 'Myanmar Standard Time',
+    abbr: 'MST',
+    offset: 6.5,
+    isdst: false,
+    text: '(UTC+06:30) Yangon (Rangoon)',
+    utc: ['Asia/Rangoon', 'Indian/Cocos'],
+  },
+  {
+    value: 'SE Asia Standard Time',
+    abbr: 'SAST',
+    offset: 7,
+    isdst: false,
+    text: '(UTC+07:00) Bangkok, Hanoi, Jakarta',
+    utc: [
+      'Antarctica/Davis',
+      'Asia/Bangkok',
+      'Asia/Hovd',
+      'Asia/Jakarta',
+      'Asia/Phnom_Penh',
+      'Asia/Pontianak',
+      'Asia/Saigon',
+      'Asia/Vientiane',
+      'Etc/GMT-7',
+      'Indian/Christmas',
+    ],
+  },
+  {
+    value: 'N. Central Asia Standard Time',
+    abbr: 'NCAST',
+    offset: 7,
+    isdst: false,
+    text: '(UTC+07:00) Novosibirsk',
+    utc: ['Asia/Novokuznetsk', 'Asia/Novosibirsk', 'Asia/Omsk'],
+  },
+  {
+    value: 'China Standard Time',
+    abbr: 'CST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi',
+    utc: ['Asia/Hong_Kong', 'Asia/Macau', 'Asia/Shanghai'],
+  },
+  {
+    value: 'North Asia Standard Time',
+    abbr: 'NAST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Krasnoyarsk',
+    utc: ['Asia/Krasnoyarsk'],
+  },
+  {
+    value: 'Singapore Standard Time',
+    abbr: 'MPST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Kuala Lumpur, Singapore',
+    utc: [
+      'Asia/Brunei',
+      'Asia/Kuala_Lumpur',
+      'Asia/Kuching',
+      'Asia/Makassar',
+      'Asia/Manila',
+      'Asia/Singapore',
+      'Etc/GMT-8',
+    ],
+  },
+  {
+    value: 'W. Australia Standard Time',
+    abbr: 'WAST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Perth',
+    utc: ['Antarctica/Casey', 'Australia/Perth'],
+  },
+  {
+    value: 'Taipei Standard Time',
+    abbr: 'TST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Taipei',
+    utc: ['Asia/Taipei'],
+  },
+  {
+    value: 'Ulaanbaatar Standard Time',
+    abbr: 'UST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Ulaanbaatar',
+    utc: ['Asia/Choibalsan', 'Asia/Ulaanbaatar'],
+  },
+  {
+    value: 'North Asia East Standard Time',
+    abbr: 'NAEST',
+    offset: 8,
+    isdst: false,
+    text: '(UTC+08:00) Irkutsk',
+    utc: ['Asia/Irkutsk'],
+  },
+  {
+    value: 'Japan Standard Time',
+    abbr: 'JST',
+    offset: 9,
+    isdst: false,
+    text: '(UTC+09:00) Osaka, Sapporo, Tokyo',
+    utc: ['Asia/Dili', 'Asia/Jayapura', 'Asia/Tokyo', 'Etc/GMT-9', 'Pacific/Palau'],
+  },
+  {
+    value: 'Korea Standard Time',
+    abbr: 'KST',
+    offset: 9,
+    isdst: false,
+    text: '(UTC+09:00) Seoul',
+    utc: ['Asia/Pyongyang', 'Asia/Seoul'],
+  },
+  {
+    value: 'Cen. Australia Standard Time',
+    abbr: 'CAST',
+    offset: 9.5,
+    isdst: false,
+    text: '(UTC+09:30) Adelaide',
+    utc: ['Australia/Adelaide', 'Australia/Broken_Hill'],
+  },
+  {
+    value: 'AUS Central Standard Time',
+    abbr: 'ACST',
+    offset: 9.5,
+    isdst: false,
+    text: '(UTC+09:30) Darwin',
+    utc: ['Australia/Darwin'],
+  },
+  {
+    value: 'E. Australia Standard Time',
+    abbr: 'EAST',
+    offset: 10,
+    isdst: false,
+    text: '(UTC+10:00) Brisbane',
+    utc: ['Australia/Brisbane', 'Australia/Lindeman'],
+  },
+  {
+    value: 'AUS Eastern Standard Time',
+    abbr: 'AEST',
+    offset: 10,
+    isdst: false,
+    text: '(UTC+10:00) Canberra, Melbourne, Sydney',
+    utc: ['Australia/Melbourne', 'Australia/Sydney'],
+  },
+  {
+    value: 'West Pacific Standard Time',
+    abbr: 'WPST',
+    offset: 10,
+    isdst: false,
+    text: '(UTC+10:00) Guam, Port Moresby',
+    utc: [
+      'Antarctica/DumontDUrville',
+      'Etc/GMT-10',
+      'Pacific/Guam',
+      'Pacific/Port_Moresby',
+      'Pacific/Saipan',
+      'Pacific/Truk',
+    ],
+  },
+  {
+    value: 'Tasmania Standard Time',
+    abbr: 'TST',
+    offset: 10,
+    isdst: false,
+    text: '(UTC+10:00) Hobart',
+    utc: ['Australia/Currie', 'Australia/Hobart'],
+  },
+  {
+    value: 'Yakutsk Standard Time',
+    abbr: 'YST',
+    offset: 9,
+    isdst: false,
+    text: '(UTC+09:00) Yakutsk',
+    utc: ['Asia/Chita', 'Asia/Khandyga', 'Asia/Yakutsk'],
+  },
+  {
+    value: 'Central Pacific Standard Time',
+    abbr: 'CPST',
+    offset: 11,
+    isdst: false,
+    text: '(UTC+11:00) Solomon Is., New Caledonia',
+    utc: [
+      'Antarctica/Macquarie',
+      'Etc/GMT-11',
+      'Pacific/Efate',
+      'Pacific/Guadalcanal',
+      'Pacific/Kosrae',
+      'Pacific/Noumea',
+      'Pacific/Ponape',
+    ],
+  },
+  {
+    value: 'Vladivostok Standard Time',
+    abbr: 'VST',
+    offset: 11,
+    isdst: false,
+    text: '(UTC+11:00) Vladivostok',
+    utc: ['Asia/Sakhalin', 'Asia/Ust-Nera', 'Asia/Vladivostok'],
+  },
+  {
+    value: 'New Zealand Standard Time',
+    abbr: 'NZST',
+    offset: 12,
+    isdst: false,
+    text: '(UTC+12:00) Auckland, Wellington',
+    utc: ['Antarctica/McMurdo', 'Pacific/Auckland'],
+  },
+  {
+    value: 'UTC+12',
+    abbr: 'U',
+    offset: 12,
+    isdst: false,
+    text: '(UTC+12:00) Coordinated Universal Time+12',
+    utc: [
+      'Etc/GMT-12',
+      'Pacific/Funafuti',
+      'Pacific/Kwajalein',
+      'Pacific/Majuro',
+      'Pacific/Nauru',
+      'Pacific/Tarawa',
+      'Pacific/Wake',
+      'Pacific/Wallis',
+    ],
+  },
+  {
+    value: 'Fiji Standard Time',
+    abbr: 'FST',
+    offset: 12,
+    isdst: false,
+    text: '(UTC+12:00) Fiji',
+    utc: ['Pacific/Fiji'],
+  },
+  {
+    value: 'Magadan Standard Time',
+    abbr: 'MST',
+    offset: 12,
+    isdst: false,
+    text: '(UTC+12:00) Magadan',
+    utc: ['Asia/Anadyr', 'Asia/Kamchatka', 'Asia/Magadan', 'Asia/Srednekolymsk'],
+  },
+  {
+    value: 'Kamchatka Standard Time',
+    abbr: 'KDT',
+    offset: 13,
+    isdst: true,
+    text: '(UTC+12:00) Petropavlovsk-Kamchatsky - Old',
+    utc: ['Asia/Kamchatka'],
+  },
+  {
+    value: 'Tonga Standard Time',
+    abbr: 'TST',
+    offset: 13,
+    isdst: false,
+    text: "(UTC+13:00) Nuku'alofa",
+    utc: ['Etc/GMT-13', 'Pacific/Enderbury', 'Pacific/Fakaofo', 'Pacific/Tongatapu'],
+  },
+  {
+    value: 'Samoa Standard Time',
+    abbr: 'SST',
+    offset: 13,
+    isdst: false,
+    text: '(UTC+13:00) Samoa',
+    utc: ['Pacific/Apia'],
+  },
+]
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITR.types.ts b/studio/components/interfaces/Database/Backups/PITR/PITR.types.ts
new file mode 100644
index 00000000000..7b7d4955df9
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITR.types.ts
@@ -0,0 +1,14 @@
+export interface Timezone {
+  value: string
+  abbr: string
+  offset: number
+  isdst: boolean
+  text: string
+  utc: string[]
+}
+
+export interface Time {
+  h: string
+  m: string
+  s: string
+}
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITR.utils.ts b/studio/components/interfaces/Database/Backups/PITR/PITR.utils.ts
new file mode 100644
index 00000000000..57477369ac8
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITR.utils.ts
@@ -0,0 +1,31 @@
+import dayjs from 'dayjs'
+import { ALL_TIMEZONES } from './PITR.constants'
+import { Timezone } from './PITR.types'
+
+export const getClientTimezone = () => {
+  const defaultTz = dayjs.tz.guess()
+  const timezone = ALL_TIMEZONES.find((option) => {
+    if (option.utc.includes(defaultTz)) return option
+    else return undefined
+  })
+  return timezone ?? ALL_TIMEZONES[0]
+}
+
+export const checkMatchingDates = (selectedDate: Date | undefined, targetDate: Date) => {
+  if (!selectedDate) return false
+
+  const formattedSelectedDate = new Date(selectedDate.getTime())
+  formattedSelectedDate.setHours(0, 0, 0, 0)
+
+  const formattedTargetDate = new Date(targetDate.getTime())
+  formattedTargetDate.setHours(0, 0, 0, 0)
+
+  return Number(formattedSelectedDate) === Number(formattedTargetDate)
+}
+
+export const formatNumberToTwoDigits = (number: Number) => {
+  return number.toLocaleString('en-US', {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  })
+}
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
new file mode 100644
index 00000000000..0cc70ce4940
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -0,0 +1,35 @@
+import { Button, IconCalendar, IconClock } from '@supabase/ui'
+import { FormPanel } from 'components/ui/Forms'
+
+const PITRNotice = ({}) => {
+  return (
+    <FormPanel
+      disabled={true}
+      footer={
+        <div className="flex items-center justify-between p-6">
+          <span className="text-scale-1000 text-sm">
+            Recovery retention period can be increase by upgrading
+          </span>
+          <Button type="default" icon={<IconClock strokeWidth={2} />}>
+            Increase backup retention
+          </Button>
+        </div>
+      }
+    >
+      <div className="p-6 flex space-x-6">
+        <div className="h-10 w-10 rounded flex items-center justify-center bg-scale-700">
+          <IconCalendar strokeWidth={2} />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm">Recovery retention period</p>
+          <p className="text-sm text-scale-1100">
+            Database changes are logged every <span className="text-scale-1200">2 minutes</span>,
+            with a total recovery period of up to <span className="text-scale-1200">7 days</span>.
+          </p>
+        </div>
+      </div>
+    </FormPanel>
+  )
+}
+
+export default PITRNotice
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
new file mode 100644
index 00000000000..60a8a97bdb6
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
@@ -0,0 +1,326 @@
+import dayjs from 'dayjs'
+import DatePicker from 'react-datepicker'
+import { useState } from 'react'
+import { format } from 'date-fns'
+import { observer } from 'mobx-react-lite'
+import {
+  Button,
+  Modal,
+  IconChevronLeft,
+  IconChevronRight,
+  IconHelpCircle,
+  IconDatabase,
+} from '@supabase/ui'
+
+import { useStore } from 'hooks'
+
+import { Time } from './PITR.types'
+import { getClientTimezone, checkMatchingDates, formatNumberToTwoDigits } from './PITR.utils'
+import PITRStatus from './PITRStatus'
+import TimeInput from './TimeInput'
+import TimezoneSelection from './TimezoneSelection'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
+import InformationBox from 'components/ui/InformationBox'
+
+// [Joshen TODO] Remaining todos:
+// - Need to validate the selectedDate against earliest and latest here to disable the review restore details button
+// - Refine messaging in confirmation modal
+// - Actually hook up the BE API, please ensure that the unix timestamp getting sent is correct
+// - Highlight available dates in the calendar and add a legend
+// - Just need to check in thereafter with Jonny if the changes are okay
+// - Deprecate old PITR components
+
+const PITRSelection = ({}) => {
+  const { backups } = useStore()
+  const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
+    backups?.configuration?.physicalBackupData ?? {}
+
+  const [selectedDate, setSelectedDate] = useState<Date>()
+  const [selectedTimezone, setSelectedTimezone] = useState(getClientTimezone())
+  const [showConfiguration, setShowConfiguration] = useState(false)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+
+  const formattedSelectedDate = dayjs.unix(Number(selectedDate) / 1000)
+  // Should only convert to timezone at when confirming
+  // const formattedSelectedDate = dayjs.unix(Number(selectedDate) / 1000).tz(selectedTimezone?.utc[0])
+
+  const earliestAvailableBackup = new Date(earliestPhysicalBackupDateUnix * 1000)
+  const earliestAvailableTiming = dayjs(earliestAvailableBackup).tz(selectedTimezone?.utc[0])
+
+  const latestAvailableBackup = new Date(latestPhysicalBackupDateUnix * 1000)
+  const latestAvailableTiming = dayjs(latestAvailableBackup).tz(selectedTimezone?.utc[0])
+
+  const isSelectedOnEarliest = checkMatchingDates(selectedDate, earliestAvailableBackup)
+  const isSelectedOnLatest = checkMatchingDates(selectedDate, latestAvailableBackup)
+
+  const formattedSelectedTiming =
+    selectedDate !== undefined
+      ? {
+          h: formatNumberToTwoDigits(selectedDate.getHours()),
+          m: formatNumberToTwoDigits(selectedDate.getMinutes()),
+          s: formatNumberToTwoDigits(selectedDate.getSeconds()),
+        }
+      : undefined
+
+  const formattedEarliestTiming = isSelectedOnEarliest
+    ? {
+        h: formatNumberToTwoDigits(earliestAvailableTiming.hour()),
+        m: formatNumberToTwoDigits(earliestAvailableTiming.minute()),
+        s: formatNumberToTwoDigits(earliestAvailableTiming.second()),
+      }
+    : undefined
+
+  const formattedLatestTiming = isSelectedOnLatest
+    ? {
+        h: formatNumberToTwoDigits(latestAvailableTiming.hour()),
+        m: formatNumberToTwoDigits(latestAvailableTiming.minute()),
+        s: formatNumberToTwoDigits(latestAvailableTiming.second()),
+      }
+    : undefined
+
+  const onCancel = () => {
+    setSelectedDate(undefined)
+    setSelectedTimezone(getClientTimezone())
+    setShowConfiguration(false)
+  }
+
+  const onUpdateDate = (date: Date) => {
+    const isSelectedOnEarliest = checkMatchingDates(date, earliestAvailableBackup)
+    const isSelectedOnLatest = checkMatchingDates(selectedDate, latestAvailableBackup)
+
+    if (isSelectedOnEarliest) {
+      date.setHours(
+        earliestAvailableTiming.hour(),
+        earliestAvailableTiming.minute(),
+        earliestAvailableTiming.second(),
+        0
+      )
+    } else if (isSelectedOnLatest) {
+      date.setHours(
+        latestAvailableTiming.hour(),
+        latestAvailableTiming.minute(),
+        latestAvailableTiming.second(),
+        0
+      )
+    } else {
+      date.setHours(0, 0, 0, 0)
+    }
+
+    setSelectedDate(date)
+  }
+
+  const onUpdateTime = (time: Time) => {
+    if (!selectedDate) return
+    const updatedDate = new Date(Number(selectedDate))
+    updatedDate.setHours(Number(time.h))
+    updatedDate.setMinutes(Number(time.m))
+    updatedDate.setSeconds(Number(time.s))
+    setSelectedDate(updatedDate)
+  }
+
+  return (
+    <>
+      <FormHeader
+        title="Restore your database from a backup"
+        description="Database changes are watched and recorded, so that you can restore your database to any point in time"
+      />
+      {!showConfiguration ? (
+        <PITRStatus onSetConfiguration={() => setShowConfiguration(true)} />
+      ) : (
+        <FormPanel
+          disabled={true}
+          footer={
+            <div className="flex items-center justify-end gap-3 p-6">
+              <Button type="default" onClick={onCancel}>
+                Cancel
+              </Button>
+              <Button type="warning" onClick={() => setShowConfirmation(true)}>
+                Review restore details
+              </Button>
+            </div>
+          }
+        >
+          <div className="flex justify-between px-10 py-6 space-x-10">
+            <div className="w-1/3 space-y-2">
+              {/* Highlight the available dates better */}
+              <DatePicker
+                inline
+                selected={selectedDate}
+                onChange={onUpdateDate}
+                dayClassName={() => 'cursor-pointer'}
+                minDate={earliestAvailableBackup}
+                maxDate={latestAvailableBackup}
+                // highlightDates={[new Date()]}
+                renderCustomHeader={({
+                  date,
+                  decreaseMonth,
+                  increaseMonth,
+                  prevMonthButtonDisabled,
+                  nextMonthButtonDisabled,
+                }) => (
+                  <div className="flex items-center justify-between px-2 py-2">
+                    <div className="flex w-full items-center justify-between">
+                      <button
+                        onClick={decreaseMonth}
+                        disabled={prevMonthButtonDisabled}
+                        type="button"
+                        className={`
+                            ${prevMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
+                            text-scale-1100 hover:text-scale-1200 focus:outline-none
+                        `}
+                      >
+                        <IconChevronLeft size={16} strokeWidth={2} />
+                      </button>
+                      <span className="text-scale-1100 text-sm">{format(date, 'MMMM yyyy')}</span>
+                      <button
+                        onClick={increaseMonth}
+                        disabled={nextMonthButtonDisabled}
+                        type="button"
+                        className={`
+                            ${nextMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
+                            text-scale-1100 hover:text-scale-1200 focus:outline-none
+                        `}
+                      >
+                        <IconChevronRight size={16} strokeWidth={2} />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+            <div className="w-2/3">
+              {!selectedDate ? (
+                <div className="h-full flex items-center justify-center">
+                  <div className="mx-2">
+                    <InformationBox
+                      defaultVisibility
+                      hideCollapse
+                      icon={<IconHelpCircle strokeWidth={2} />}
+                      title="Select a date which you'd like to restore your database to"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-8 py-2">
+                  <div className="space-y-1">
+                    <p className="text-sm text-scale-1100">Restore database to</p>
+                    <p className="text-3xl">
+                      {formattedSelectedDate.format('DD MMM YYYY, HH:mm:ss')}
+                    </p>
+                  </div>
+                  <div className="space-y-2">
+                    <p className="text-sm text-scale-1100">Time of recovery</p>
+                    <div className="w-[310px]">
+                      <TimezoneSelection
+                        hideLabel
+                        dropdownWidth="w-[350px]"
+                        selectedTimezone={selectedTimezone}
+                        onSelectTimezone={setSelectedTimezone}
+                      />
+                    </div>
+
+                    <TimeInput
+                      defaultTime={formattedSelectedTiming}
+                      minimumTime={formattedEarliestTiming}
+                      maximumTime={formattedLatestTiming}
+                      onChange={onUpdateTime}
+                    />
+
+                    <div className="!mt-4 space-y-1">
+                      {isSelectedOnEarliest && (
+                        <p className="text-sm text-scale-1000">
+                          Earliest available backup on this date is at{' '}
+                          {earliestAvailableTiming.format('HH:mm:ss')}
+                        </p>
+                      )}
+                      {isSelectedOnLatest && (
+                        <p className="text-sm text-scale-1000">
+                          Latest available backup on this date is at{' '}
+                          {latestAvailableTiming.format('HH:mm:ss')}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </FormPanel>
+      )}
+      <Modal
+        closable
+        size="medium"
+        visible={showConfirmation}
+        onCancel={() => setShowConfirmation(false)}
+        customFooter={
+          <div className="flex items-center justify-end space-x-2">
+            <Button type="default" onClick={() => setShowConfirmation(false)}>
+              Cancel
+            </Button>
+            <Button type="warning" onClick={() => setShowConfirmation(false)}>
+              I understand, begin restore
+            </Button>
+          </div>
+        }
+      >
+        <div className="space-y-4 py-3">
+          <Modal.Content>
+            <p>Point in time recovery review</p>
+          </Modal.Content>
+          <Modal.Seperator />
+          <Modal.Content>
+            <div className="py-2 space-y-1">
+              <p className="text-sm text-scale-1100"> Your database will be restored to</p>
+              <p className="text-2xl">{formattedSelectedDate.format('DD MMM YYYY, HH:mm:ss')}</p>
+              <p className="text-lg">{selectedTimezone?.text}</p>
+            </div>
+          </Modal.Content>
+          <Modal.Seperator />
+          <Modal.Content>
+            <div className="py-2 space-y-3">
+              <p className="text-sm text-scale-1100">
+                Any changes made to your database up to this point of time will be lost. This
+                includes any changes involving storage and authentication.
+              </p>
+              <p className="text-sm text-scale-1100">
+                The restoration process will incur some downtime to your project and cannot be
+                undone.
+              </p>
+              {/* <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200">
+                  <IconDatabase strokeWidth={2} />
+                </div>
+                <div>
+                  <p className="text-sm">Potential loss of recent data</p>
+                  <p className="text-sm text-scale-1100">
+                    Any database changes being made currently could be lost.
+                  </p>
+                </div>
+              </div>
+              <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200" />
+                <div>
+                  <p className="text-sm">Potential loss of new users</p>
+                  <p className="text-sm text-scale-1100">
+                    Users that recently signed up to your project could be lost.
+                  </p>
+                </div>
+              </div>
+              <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200" />
+                <div>
+                  <p className="text-sm">Potential loss of storage files</p>
+                  <p className="text-sm text-scale-1100">
+                    Any files recently uploaded to your storage could be lost.
+                  </p>
+                </div>
+              </div> */}
+            </div>
+          </Modal.Content>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default observer(PITRSelection)
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx
new file mode 100644
index 00000000000..593f062dd4b
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx
@@ -0,0 +1,72 @@
+import dayjs from 'dayjs'
+import { FC, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Button, IconAlertCircle } from '@supabase/ui'
+
+import { useStore } from 'hooks'
+import { getClientTimezone } from './PITR.utils'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
+import TimezoneSelection from './TimezoneSelection'
+
+interface Props {
+  onSetConfiguration: () => void
+}
+
+const PITRStatus: FC<Props> = ({ onSetConfiguration }) => {
+  const { backups } = useStore()
+  const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
+    backups?.configuration?.physicalBackupData ?? {}
+
+  const [selectedTimezone, setSelectedTimezone] = useState<any>(getClientTimezone())
+
+  const earliestAvailableBackup = dayjs
+    .unix(earliestPhysicalBackupDateUnix)
+    .tz(selectedTimezone?.utc[0])
+    .format('DD MMM YYYY, HH:mm:ss')
+
+  const latestAvailableBackup = dayjs
+    .unix(latestPhysicalBackupDateUnix)
+    .tz(selectedTimezone?.utc[0])
+    .format('DD MMM YYYY, HH:mm:ss')
+
+  return (
+    <>
+      <FormPanel
+        disabled={true}
+        footer={
+          <div className="flex items-center justify-between p-6">
+            <div className="flex items-center space-x-4">
+              <IconAlertCircle className="text-scale-1100" size={18} strokeWidth={1.5} />
+              <span className="text-scale-1000 text-sm">
+                You'll be able to pick the right date and time when you begin
+              </span>
+            </div>
+            <Button onClick={() => onSetConfiguration()}>Start a restore</Button>
+          </div>
+        }
+      >
+        <div className="p-6 space-y-6">
+          <div className="w-[350px]">
+            <TimezoneSelection
+              hideLabel
+              selectedTimezone={selectedTimezone}
+              onSelectTimezone={setSelectedTimezone}
+            />
+          </div>
+          <div className="flex items-center space-x-20">
+            <div className="space-y-2">
+              <p className="text-sm text-scale-1100">Database restore available from</p>
+              <p className="text-2xl">{earliestAvailableBackup}</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-scale-1100">Latest restore available at</p>
+              <p className="text-2xl">{latestAvailableBackup}</p>
+            </div>
+          </div>
+        </div>
+      </FormPanel>
+    </>
+  )
+}
+
+export default observer(PITRStatus)
diff --git a/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx b/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx
new file mode 100644
index 00000000000..236d4fbb354
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx
@@ -0,0 +1,185 @@
+import dayjs from 'dayjs'
+import { isNaN } from 'lodash'
+import { ChangeEvent, FC, useEffect, useState } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { IconClock } from '@supabase/ui'
+
+import { Time } from './PITR.types'
+import { formatNumberToTwoDigits } from './PITR.utils'
+
+// [Joshen] This is trying to do the same thing as TimeSplitInput.tsx
+// so can we please look to try to combine these 2 components together if possible
+// The problem with TimeSplitInput is that it's tightly coupled to the date + its
+// tightly coupled to the context of a range. Ideally it should be more modular
+// which is what this component is trying to achieve
+
+// [Joshen] Potential extension, give option to toggle 24 hours or AM/PM
+
+interface Props {
+  defaultTime?: Time
+  minimumTime?: Time
+  maximumTime?: Time
+  onChange?: (time: Time) => void
+}
+
+const TimeInput: FC<Props> = ({ defaultTime, minimumTime, maximumTime, onChange = () => {} }) => {
+  const [isFocused, setIsFocused] = useState(false)
+  const [error, setError] = useState<string>()
+  const [time, setTime] = useState<Time>({ h: '00', m: '00', s: '00' })
+
+  useEffect(() => {
+    if (defaultTime) setTime(defaultTime)
+  }, [])
+
+  useEffect(() => {
+    validate(defaultTime ?? time)
+  }, [JSON.stringify(minimumTime), JSON.stringify(maximumTime)])
+
+  const validate = (time: Time) => {
+    let error = undefined
+
+    const formattedTime = dayjs(`${time.h}:${time.m}:${time.s}`, 'HH:mm:ss', true)
+    if (!formattedTime.isValid()) error = 'Please enter a valid time'
+
+    const formattedMinimumTime = minimumTime
+      ? dayjs(`${minimumTime.h}:${minimumTime.m}:${minimumTime.s}`, 'HH:mm:ss', true)
+      : undefined
+    if (formattedMinimumTime && formattedTime.isBefore(formattedMinimumTime)) {
+      error = 'Selected time is before the minimum time allowed'
+    }
+
+    const formattedMaximumTime = maximumTime
+      ? dayjs(`${maximumTime.h}:${maximumTime.m}:${maximumTime.s}`, 'HH:mm:ss', true)
+      : undefined
+    if (formattedMaximumTime && formattedTime.isAfter(formattedMaximumTime)) {
+      error = 'Selected time is after the maximum time allowed'
+    }
+
+    setError(error)
+    return error === undefined
+  }
+
+  const onFocus = () => setIsFocused(true)
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>, unit: 'h' | 'm' | 's') => {
+    if (isNaN(Number(event.target.value))) return
+    setTime({ ...time, [unit]: event.target.value })
+  }
+
+  const onInputBlur = (event: ChangeEvent<HTMLInputElement>, unit: 'h' | 'm' | 's') => {
+    const formattedInput = formatNumberToTwoDigits(Number(event.target.value))
+    const updatedTime = { ...time, [unit]: formattedInput }
+    setTime(updatedTime)
+
+    const isValid = validate(updatedTime)
+    if (isValid) onChange(updatedTime)
+
+    setIsFocused(false)
+  }
+
+  return (
+    <>
+      <div
+        className={[
+          'flex items-center justify-between transition',
+          'rounded-md bg-scaleA-200 border px-3.5 py-2 w-[310px]',
+          `${
+            isFocused
+              ? 'border-scale-900'
+              : error === undefined
+              ? 'border-scale-700'
+              : 'border-red-800'
+          }`,
+        ].join(' ')}
+      >
+        <IconClock className="text-scale-1100" size={18} strokeWidth={1.5} />
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="HH"
+              value={time.h}
+              onFocus={onFocus}
+              aria-label="Hours"
+              onBlur={(event) => onInputBlur(event, 'h')}
+              onChange={(event) => onInputChange(event, 'h')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Hours (HH)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+        <span>:</span>
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="MM"
+              value={time.m}
+              onFocus={onFocus}
+              aria-label="Minutes"
+              onBlur={(event) => onInputBlur(event, 'm')}
+              onChange={(event) => onInputChange(event, 'm')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Minutes (MM)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+        <span>:</span>
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="SS"
+              value={time.s}
+              onFocus={onFocus}
+              aria-label="Seconds"
+              onBlur={(event) => onInputBlur(event, 's')}
+              onChange={(event) => onInputChange(event, 's')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Seconds (SS)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+      {error && <p className="text-sm text-red-900">{error}</p>}
+    </>
+  )
+}
+
+export default TimeInput
diff --git a/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx b/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
new file mode 100644
index 00000000000..b54839a7a86
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
@@ -0,0 +1,78 @@
+import { FC, useState, FormEvent } from 'react'
+import { Listbox, IconSearch, IconGlobe } from '@supabase/ui'
+
+import { ALL_TIMEZONES } from './PITR.constants'
+
+interface Props {
+  hideLabel?: boolean
+  dropdownWidth?: string
+  selectedTimezone: any
+  onSelectTimezone: (timezone: any) => void
+}
+
+const TimezoneSelection: FC<Props> = ({
+  hideLabel,
+  dropdownWidth,
+  selectedTimezone,
+  onSelectTimezone,
+}) => {
+  const [searchString, setSearchString] = useState<string>('')
+
+  const timezoneOptions =
+    searchString.length > 0
+      ? ALL_TIMEZONES.map((option) => option.text).filter((option) =>
+          option.toLowerCase().includes(searchString.toLowerCase())
+        )
+      : ALL_TIMEZONES.map((option) => option.text)
+
+  return (
+    <div className="flex justify-between space-x-8">
+      {!hideLabel && <p className="w-2/5 text-sm">Select timezone</p>}
+      <div className={`${hideLabel ? 'w-full' : 'w-3/5'}`}>
+        <Listbox
+          value={selectedTimezone.text}
+          icon={<IconGlobe />}
+          onChange={(text) => {
+            const selectedTimezone = ALL_TIMEZONES.find((option) => option.text === text)
+            onSelectTimezone(selectedTimezone)
+          }}
+          onBlur={() => setSearchString('')}
+        >
+          <div
+            className={[
+              'fixed top-0 flex w-full items-center',
+              'rounded-t-md border-b border-gray-600 bg-gray-500',
+              'mb-4 space-x-2 px-4 py-2',
+            ].join(' ')}
+            style={{ zIndex: 1 }}
+          >
+            <IconSearch size={14} />
+            <input
+              autoFocus
+              className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+              value={searchString}
+              placeholder={''}
+              onChange={(e: FormEvent<HTMLInputElement>) => setSearchString(e.currentTarget.value)}
+            />
+          </div>
+          {/* Whitespace to shift listbox options down for searchfield */}
+          <div className="h-8" />
+          {timezoneOptions.map((option) => {
+            return (
+              <Listbox.Option key={option} label={option} value={option} className={dropdownWidth}>
+                <div>{option}</div>
+              </Listbox.Option>
+            )
+          })}
+          {timezoneOptions.length === 0 && (
+            <Listbox.Option disabled key="no-results" label="" value="">
+              No timezones found
+            </Listbox.Option>
+          )}
+        </Listbox>
+      </div>
+    </div>
+  )
+}
+
+export default TimezoneSelection
diff --git a/studio/components/interfaces/Database/Backups/PITR/index.ts b/studio/components/interfaces/Database/Backups/PITR/index.ts
new file mode 100644
index 00000000000..2b24fb9939f
--- /dev/null
+++ b/studio/components/interfaces/Database/Backups/PITR/index.ts
@@ -0,0 +1,4 @@
+import PITRNotice from './PITRNotice'
+import PITRSelection from './PITRSelection'
+
+export { PITRNotice, PITRSelection }
diff --git a/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx b/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
index bab01cc1adb..0fde50cbc8f 100644
--- a/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
+++ b/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
@@ -29,6 +29,7 @@ import {
   convertTimeStringtoUnixS,
 } from './PITRBackupSelection.utils'
 import InformationBox from 'components/ui/InformationBox'
+import { FormHeader } from 'components/ui/Forms'
 
 interface Props {}
 
@@ -159,153 +160,161 @@ const PITRBackupSelection: FC<Props> = () => {
   }
 
   return (
-    <div className="space-y-6">
-      {!canTriggerPhysicalBackups && (
-        <InformationBox
-          icon={<IconAlertCircle className="text-scale-1100" strokeWidth={2} />}
-          title="You need additional permissions to trigger a scheduled backup"
-        />
-      )}
-      <form onSubmit={onSubmit}>
-        <div className="space-y-4">
-          <div className="space-y-4 rounded border border-gray-400 border-opacity-50 bg-gray-300 py-3">
-            <div className="space-y-4 py-2">
-              <div className="flex justify-between space-x-8">
-                <p className="w-2/5 pl-4 text-sm">Select timezone</p>
-                <div className="w-3/5 px-4">
-                  <Listbox
-                    value={selectedTimezone.text}
-                    onChange={(text) => {
-                      const selectedTimezone = ALL_TIMEZONES.find((option) => option.text === text)
-                      setSelectedTimezone(selectedTimezone)
-                    }}
-                    onBlur={() => setSearchString('')}
-                  >
-                    <div
-                      className={[
-                        'fixed top-0 flex w-full items-center',
-                        'rounded-t-md border-b border-gray-600 bg-gray-500',
-                        'mb-4 space-x-2 px-4 py-2',
-                      ].join(' ')}
-                      style={{ zIndex: 1 }}
+    <>
+      <FormHeader
+        title="Restore from a point in time"
+        description="Database changes are watched and recorded, so that you cna restore your database to any point in time"
+      />
+      <div className="space-y-6">
+        {!canTriggerPhysicalBackups && (
+          <InformationBox
+            icon={<IconAlertCircle className="text-scale-1100" strokeWidth={2} />}
+            title="You need additional permissions to trigger a scheduled backup"
+          />
+        )}
+        <form onSubmit={onSubmit}>
+          <div className="space-y-4">
+            <div className="space-y-4 rounded border border-gray-400 border-opacity-50 bg-gray-300 py-3">
+              <div className="space-y-4 py-2">
+                <div className="flex justify-between space-x-8">
+                  <p className="w-2/5 pl-4 text-sm">Select timezone</p>
+                  <div className="w-3/5 px-4">
+                    <Listbox
+                      value={selectedTimezone.text}
+                      onChange={(text) => {
+                        const selectedTimezone = ALL_TIMEZONES.find(
+                          (option) => option.text === text
+                        )
+                        setSelectedTimezone(selectedTimezone)
+                      }}
+                      onBlur={() => setSearchString('')}
                     >
-                      <IconSearch size={14} />
-                      <input
-                        autoFocus
-                        className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
-                        value={searchString}
-                        placeholder={''}
-                        onChange={(e: FormEvent<HTMLInputElement>) =>
-                          setSearchString(e.currentTarget.value)
-                        }
-                      />
-                    </div>
-                    {/* Whitespace to shift listbox options down for searchfield */}
-                    <div className="h-8" />
-                    {timezoneOptions.map((option) => {
-                      return (
-                        <Listbox.Option key={option} label={option} value={option}>
-                          <div>{option}</div>
+                      <div
+                        className={[
+                          'fixed top-0 flex w-full items-center',
+                          'rounded-t-md border-b border-gray-600 bg-gray-500',
+                          'mb-4 space-x-2 px-4 py-2',
+                        ].join(' ')}
+                        style={{ zIndex: 1 }}
+                      >
+                        <IconSearch size={14} />
+                        <input
+                          autoFocus
+                          className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+                          value={searchString}
+                          placeholder={''}
+                          onChange={(e: FormEvent<HTMLInputElement>) =>
+                            setSearchString(e.currentTarget.value)
+                          }
+                        />
+                      </div>
+                      {/* Whitespace to shift listbox options down for searchfield */}
+                      <div className="h-8" />
+                      {timezoneOptions.map((option) => {
+                        return (
+                          <Listbox.Option key={option} label={option} value={option}>
+                            <div>{option}</div>
+                          </Listbox.Option>
+                        )
+                      })}
+                      {timezoneOptions.length === 0 && (
+                        <Listbox.Option disabled key="no-results" label="" value="">
+                          No timezones found
                         </Listbox.Option>
-                      )
-                    })}
-                    {timezoneOptions.length === 0 && (
-                      <Listbox.Option disabled key="no-results" label="" value="">
-                        No timezones found
-                      </Listbox.Option>
-                    )}
-                  </Listbox>
+                      )}
+                    </Listbox>
+                  </div>
+                </div>
+                <div className="flex justify-between space-x-8">
+                  <div className="w-2/5 space-y-2 pl-4">
+                    <p className="text-sm">Earliest point of recovery</p>
+                  </div>
+                  <div className="w-3/5">
+                    <Input
+                      readOnly
+                      disabled
+                      step={1}
+                      type="datetime-local"
+                      className="px-4"
+                      value={earliestAvailableBackup}
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-between space-x-8">
+                  <div className="w-2/5 space-y-2 pl-4">
+                    <p className="text-sm">Latest point of recovery</p>
+                  </div>
+                  <div className="w-3/5">
+                    <Input
+                      readOnly
+                      disabled
+                      step={1}
+                      type="datetime-local"
+                      className="px-4"
+                      value={latestAvailableBackup}
+                    />
+                  </div>
                 </div>
               </div>
-              <div className="flex justify-between space-x-8">
+              <Popover.Seperator />
+              <div className="flex justify-between space-x-8 py-2">
                 <div className="w-2/5 space-y-2 pl-4">
-                  <p className="text-sm">Earliest point of recovery</p>
+                  <p className="text-sm">Recovery point</p>
+                  <p className="text-scale-1100 text-sm">
+                    Select a date and time that you would like to restore your project to
+                  </p>
                 </div>
                 <div className="w-3/5">
                   <Input
-                    readOnly
-                    disabled
                     step={1}
                     type="datetime-local"
+                    error={errors?.recoveryPoint}
                     className="px-4"
-                    value={earliestAvailableBackup}
+                    onChange={(e) => {
+                      setErrors(undefined)
+                      setRecoveryPoint(e.target.value)
+                    }}
                   />
                 </div>
               </div>
-              <div className="flex justify-between space-x-8">
-                <div className="w-2/5 space-y-2 pl-4">
-                  <p className="text-sm">Latest point of recovery</p>
-                </div>
-                <div className="w-3/5">
-                  <Input
-                    readOnly
-                    disabled
-                    step={1}
-                    type="datetime-local"
-                    className="px-4"
-                    value={latestAvailableBackup}
-                  />
-                </div>
+              <Popover.Seperator />
+              <div className="flex items-center justify-end px-4">
+                <Button type="default" htmlType="submit">
+                  Restore
+                </Button>
               </div>
             </div>
-            <Popover.Seperator />
-            <div className="flex justify-between space-x-8 py-2">
-              <div className="w-2/5 space-y-2 pl-4">
-                <p className="text-sm">Recovery point</p>
-                <p className="text-scale-1100 text-sm">
-                  Select a date and time that you would like to restore your project to
-                </p>
-              </div>
-              <div className="w-3/5">
-                <Input
-                  step={1}
-                  type="datetime-local"
-                  error={errors?.recoveryPoint}
-                  className="px-4"
-                  onChange={(e) => {
-                    setErrors(undefined)
-                    setRecoveryPoint(e.target.value)
-                  }}
-                />
-              </div>
-            </div>
-            <Popover.Seperator />
-            <div className="flex items-center justify-end px-4">
-              <Button type="default" htmlType="submit">
-                Restore
-              </Button>
-            </div>
           </div>
-        </div>
-      </form>
-      <ConfirmationModal
-        visible={showConfirmation}
-        size="medium"
-        header="Confirm to restore"
-        children={
-          <Modal.Content>
-            <div className="space-y-2 py-4">
-              <div className="space-y-1">
+        </form>
+        <ConfirmationModal
+          visible={showConfirmation}
+          size="medium"
+          header="Confirm to restore"
+          children={
+            <Modal.Content>
+              <div className="space-y-2 py-4">
+                <div className="space-y-1">
+                  <p className="text-scale-1100 text-sm">
+                    Are you sure you want to restore your database from:
+                  </p>
+                  <p className="text-scale-1200 text-sm">
+                    {dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
+                    {getTimezoneOffsetText(selectedTimezone)})?
+                  </p>
+                </div>
                 <p className="text-scale-1100 text-sm">
-                  Are you sure you want to restore your database from:
-                </p>
-                <p className="text-scale-1200 text-sm">
-                  {dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
-                  {getTimezoneOffsetText(selectedTimezone)})?
+                  This will destroy any new data written since this backup was made.
                 </p>
               </div>
-              <p className="text-scale-1100 text-sm">
-                This will destroy any new data written since this backup was made.
-              </p>
-            </div>
-          </Modal.Content>
-        }
-        buttonLabel="Restore"
-        buttonLoadingLabel="Restoring"
-        onSelectCancel={() => setShowConfirmation(false)}
-        onSelectConfirm={onConfirmRestore}
-      />
-    </div>
+            </Modal.Content>
+          }
+          buttonLabel="Restore"
+          buttonLoadingLabel="Restoring"
+          onSelectCancel={() => setShowConfirmation(false)}
+          onSelectConfirm={onConfirmRestore}
+        />
+      </div>
+    </>
   )
 }
 
diff --git a/studio/components/ui/InformationBox.tsx b/studio/components/ui/InformationBox.tsx
index 27c3d0522cc..8cc654fedda 100644
--- a/studio/components/ui/InformationBox.tsx
+++ b/studio/components/ui/InformationBox.tsx
@@ -35,7 +35,7 @@ const InformationBox: FC<Props> = ({
     >
       <div className="flex flex-col px-4">
         <div className="flex items-center justify-between">
-          <div className="flex w-full space-x-3 lg:items-center">
+          <div className="flex w-full space-x-3 lg:items-start">
             {icon && <span className="text-scale-900">{icon}</span>}
             <div className="flex-grow">
               <h5 className="text-scale-1200 text-sm">{title}</h5>
@@ -54,26 +54,28 @@ const InformationBox: FC<Props> = ({
             </div>
           ) : null}
         </div>
-        <div
-          className={`flex flex-col space-y-3 overflow-hidden transition-all ${
-            isExpanded ? 'mt-3' : ''
-          }`}
-          style={{ maxHeight: isExpanded ? 500 : 0 }}
-        >
-          <div className="text-scale-1100 text-sm">{description}</div>
+        {(description || url || button) && (
+          <div
+            className={`flex flex-col space-y-3 overflow-hidden transition-all ${
+              isExpanded ? 'mt-3' : ''
+            }`}
+            style={{ maxHeight: isExpanded ? 500 : 0 }}
+          >
+            <div className="text-scale-1100 text-sm">{description}</div>
 
-          {url && (
-            <a
-              href={url}
-              target="_blank"
-              className="text-scale-1100 hover:text-scale-1200 text-sm underline transition-colors"
-            >
-              {urlLabel}
-            </a>
-          )}
+            {url && (
+              <a
+                href={url}
+                target="_blank"
+                className="text-scale-1100 hover:text-scale-1200 text-sm underline transition-colors"
+              >
+                {urlLabel}
+              </a>
+            )}
 
-          {button && <div>{button}</div>}
-        </div>
+            {button && <div>{button}</div>}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index f6f0e9a6c05..a71db32e2bc 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -40,6 +40,7 @@ const PasswordStrengthBar = ({
       )}
       <p
         className={
+          // [Joshen TODO] Is this correct?
           passwordStrengthScore >= DEFAULT_MINIMUM_PASSWORD_STRENGTH ? 'text-green-600' : ''
         }
       >
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 8385b87c10e..6a4296efad6 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -22,7 +22,7 @@
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.25",
         "@supabase/supabase-js": "^2.0.0-rc.2",
-        "@supabase/ui": "0.37.0-alpha.80",
+        "@supabase/ui": "0.37.0-alpha.81",
         "ajv": "^8.6.3",
         "analytics-node": "^3.5.0",
         "awesome-debounce-promise": "^2.1.0",
@@ -51,7 +51,7 @@
         "react-beautiful-dnd": "^13.1.0",
         "react-contexify": "^5.0.0",
         "react-csv": "^2.0.3",
-        "react-datepicker": "^4.6.0",
+        "react-datepicker": "^4.8.0",
         "react-dnd": "^14.0.3",
         "react-dnd-html5-backend": "^14.0.1",
         "react-dom": "^17.0.2",
@@ -8408,9 +8408,9 @@
       }
     },
     "node_modules/@supabase/ui": {
-      "version": "0.37.0-alpha.80",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
-      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
+      "version": "0.37.0-alpha.81",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.81.tgz",
+      "integrity": "sha512-CxqdikE6wGw6pGQ6b3vRA8qnvCK20VyeMyy8Z4hJ/Dg2qRfgQqbrv7qS+6A1S8pg657EzCCo0DIH75SijaU8eA==",
       "dependencies": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",
@@ -23134,9 +23134,9 @@
       "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w=="
     },
     "node_modules/react-datepicker": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
-      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
       "dependencies": {
         "@popperjs/core": "^2.9.2",
         "classnames": "^2.2.6",
@@ -23146,8 +23146,8 @@
         "react-popper": "^2.2.5"
       },
       "peerDependencies": {
-        "react": "^16.9.0 || ^17",
-        "react-dom": "^16.9.0 || ^17"
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
       }
     },
     "node_modules/react-dnd": {
@@ -35813,9 +35813,9 @@
       }
     },
     "@supabase/ui": {
-      "version": "0.37.0-alpha.80",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
-      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
+      "version": "0.37.0-alpha.81",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.81.tgz",
+      "integrity": "sha512-CxqdikE6wGw6pGQ6b3vRA8qnvCK20VyeMyy8Z4hJ/Dg2qRfgQqbrv7qS+6A1S8pg657EzCCo0DIH75SijaU8eA==",
       "requires": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",
@@ -47308,9 +47308,9 @@
       "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w=="
     },
     "react-datepicker": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
-      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
       "requires": {
         "@popperjs/core": "^2.9.2",
         "classnames": "^2.2.6",
diff --git a/studio/package.json b/studio/package.json
index 8715e7c0f45..e76e6d902e1 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -28,7 +28,7 @@
     "@supabase/react-data-grid": "^7.1.0-beta.7",
     "@supabase/shared-types": "^0.1.25",
     "@supabase/supabase-js": "^2.0.0-rc.2",
-    "@supabase/ui": "0.37.0-alpha.80",
+    "@supabase/ui": "0.37.0-alpha.81",
     "ajv": "^8.6.3",
     "analytics-node": "^3.5.0",
     "awesome-debounce-promise": "^2.1.0",
@@ -57,7 +57,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-contexify": "^5.0.0",
     "react-csv": "^2.0.3",
-    "react-datepicker": "^4.6.0",
+    "react-datepicker": "^4.8.0",
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.1",
     "react-dom": "^17.0.2",
diff --git a/studio/pages/project/[ref]/database/backups/pitr.tsx b/studio/pages/project/[ref]/database/backups/pitr.tsx
index 75991a421ae..0afd456b79e 100644
--- a/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -8,6 +8,7 @@ import { DatabaseLayout } from 'components/layouts'
 import { PITRBackupSelection } from 'components/interfaces/Database'
 import { NextPageWithLayout } from 'types'
 import NoPermission from 'components/ui/NoPermission'
+import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
 
 const DatabaseScheduledBackups: NextPageWithLayout = () => {
   const { ui } = useStore()
@@ -28,16 +29,17 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
           if (id === 'scheduled') router.push(`/project/${ref}/database/backups/scheduled`)
         }}
       >
-        <Tabs.Panel id="scheduled" label="Scheduled" />
+        <Tabs.Panel id="scheduled" label="Scheduled backups" />
         <Tabs.Panel id="pitr" label="Point in Time" />
       </Tabs>
 
-      <div className="space-y-4">
-        <p className="text-scale-1100 text-sm">
-          Restore your project from a specific date and time.
-        </p>
+      <div className="space-y-8">
         {canReadPhysicalBackups ? (
-          <PITRBackupSelection />
+          <>
+            <PITRNotice />
+            <PITRSelection />
+            {/* <PITRBackupSelection /> */}
+          </>
         ) : (
           <NoPermission resourceText="view PITR backups" />
         )}
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index 07b30249b2a..3fec4917686 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -27,7 +27,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
           if (id === 'pitr') router.push(`/project/${ref}/database/backups/pitr`)
         }}
       >
-        <Tabs.Panel id="scheduled" label="Scheduled" />
+        <Tabs.Panel id="scheduled" label="Scheduled backups" />
         <Tabs.Panel id="pitr" label="Point in Time" />
       </Tabs>
 
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index 90f96730ae2..89cb112980e 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -99,3 +99,11 @@
 .react-datepicker__day--range-end {
   @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
 }
+
+.react-datepicker__day--highlighted {
+  background: linear-gradient(135deg, #34B27B 0% 20%, transparent 20%);
+}
+
+.react-datepicker__day--selected.react-datepicker__day--highlighted {
+  background: linear-gradient(135deg, #34B27B 0% 20%, hsla(153, 60%, 28%, 1) 20%);
+}
\ No newline at end of file
diff --git a/studio/styles/main.scss b/studio/styles/main.scss
index bbbcf1484aa..28468481253 100644
--- a/studio/styles/main.scss
+++ b/studio/styles/main.scss
@@ -126,6 +126,10 @@ input[type='submit']:hover {
   @apply btn-primary-hover;
 }
 
+input::placeholder {
+  @apply text-scale-900;
+}
+
 .form-group input::placeholder {
   @apply text-scale-900;
 }
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index 131380b4316..43b55649e6a 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -326,3 +326,7 @@
     // fill: #eeeeee;
   }
 }
+
+.pitr-listbox {
+  @apply md:gap-x-2;
+}
\ No newline at end of file