diff --git a/components/rdv/OngletAgendaConseiller.tsx b/components/rdv/OngletAgendaConseiller.tsx
index 7c9bff42b..74d8569c7 100644
--- a/components/rdv/OngletAgendaConseiller.tsx
+++ b/components/rdv/OngletAgendaConseiller.tsx
@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import EmptyState from 'components/EmptyState'
 import TableauEvenementsConseiller from 'components/rdv/TableauEvenementsConseiller'
@@ -35,20 +35,26 @@ export default function OngletAgendaConseiller({
   periodeIndex,
   changerPeriode,
 }: OngletAgendaConseillerProps) {
+  const tableRef = useRef<HTMLTableElement>(null)
+
   const [evenements, setEvenements] = useState<EvenementListItem[]>()
+  const [shouldFocus, setShouldFocus] = useState<boolean>(false)
+
   const [periode, setPeriode] = useState<{ debut: DateTime; fin: DateTime }>()
   const [labelPeriode, setLabelPeriode] = useState<string>()
   const [failed, setFailed] = useState<boolean>(false)
 
   async function chargerNouvellePeriode(
-    nouvellePeriodeIndex: number,
-    dateDebut: DateTime,
-    dateFin: DateTime,
-    label: string
+    nouvellePeriode: { index: number; dateDebut: DateTime; dateFin: DateTime },
+    opts: { label: string; shouldFocus: boolean }
   ) {
-    await initEvenementsPeriode(dateDebut, dateFin)
-    setLabelPeriode(label)
-    changerPeriode(nouvellePeriodeIndex)
+    await initEvenementsPeriode(
+      nouvellePeriode.dateDebut,
+      nouvellePeriode.dateFin
+    )
+    setLabelPeriode(opts.label)
+    changerPeriode(nouvellePeriode.index)
+    setShouldFocus(opts.shouldFocus)
   }
 
   async function initEvenementsPeriode(dateDebut: DateTime, dateFin: DateTime) {
@@ -89,6 +95,10 @@ export default function OngletAgendaConseiller({
       )
   }
 
+  useEffect(() => {
+    if (shouldFocus) tableRef.current?.focus()
+  }, [evenements])
+
   return (
     <>
       <SelecteurPeriode
@@ -107,6 +117,7 @@ export default function OngletAgendaConseiller({
 
       {!evenements && failed && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Maintenance}
           titre='L’affichage de votre agenda a échoué.'
           sousTitre='Si le problème persiste, contactez notre support.'
@@ -119,6 +130,7 @@ export default function OngletAgendaConseiller({
 
       {evenements?.length === 0 && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Checklist}
           titre='Vous n’avez aucun événement dans votre agenda sur cette période.'
           lien={{
@@ -131,6 +143,7 @@ export default function OngletAgendaConseiller({
 
       {evenements && evenements.length > 0 && (
         <TableauEvenementsConseiller
+          ref={tableRef}
           evenements={evenements}
           periodeLabel={labelPeriode!}
         />
diff --git a/components/rdv/OngletAgendaEtablissement.tsx b/components/rdv/OngletAgendaEtablissement.tsx
index 1945b6fc0..490dd0c70 100644
--- a/components/rdv/OngletAgendaEtablissement.tsx
+++ b/components/rdv/OngletAgendaEtablissement.tsx
@@ -50,6 +50,7 @@ export default function OngletAgendaEtablissement({
   const [recherche, setRecherche] = useState<string>('')
   const [evenementsAffiches, setEvenementsAffiches] =
     useState<AnimationCollective[]>()
+  const [shouldFocus, setShouldFocus] = useState<boolean>(false)
 
   const [periode, setPeriode] = useState<{ debut: DateTime; fin: DateTime }>()
   const [labelPeriode, setLabelPeriode] = useState<string>()
@@ -61,14 +62,16 @@ export default function OngletAgendaEtablissement({
   }
 
   async function modifierPeriode(
-    nouvellePeriodeIndex: number,
-    dateDebut: DateTime,
-    dateFin: DateTime,
-    label: string
+    nouvellePeriode: { index: number; dateDebut: DateTime; dateFin: DateTime },
+    opts: { label: string; shouldFocus: boolean }
   ) {
-    await chargerEvenementsPeriode(dateDebut, dateFin)
-    setLabelPeriode(label)
-    changerPeriode(nouvellePeriodeIndex)
+    await chargerEvenementsPeriode(
+      nouvellePeriode.dateDebut,
+      nouvellePeriode.dateFin
+    )
+    setLabelPeriode(opts.label)
+    changerPeriode(nouvellePeriode.index)
+    setShouldFocus(opts.shouldFocus)
   }
 
   async function chargerEvenementsPeriode(
@@ -127,11 +130,15 @@ export default function OngletAgendaEtablissement({
     tableRef.current?.focus()
   }, [recherche])
 
+  useEffect(() => {
+    if (shouldFocus) tableRef.current?.focus()
+  }, [evenementsAffiches])
+
   return (
     <>
       <RechercheAgendaForm onSearch={setRecherche} />
 
-      <nav className='flex justify-between items-end'>
+      <nav className='flex justify-between items-center'>
         <SelecteurPeriode
           onNouvellePeriode={modifierPeriode}
           periodeCourante={periodeIndex}
@@ -159,6 +166,7 @@ export default function OngletAgendaEtablissement({
 
       {!evenementsAffiches && periodeFailed && (
         <EmptyState
+          shouldFocus={shouldFocus}
           illustrationName={IllustrationName.Maintenance}
           titre={`
             L’affichage de l’agenda de votre ${
@@ -177,7 +185,7 @@ export default function OngletAgendaEtablissement({
       {evenementsAffiches?.length === 0 && (
         <div className='flex flex-col justify-center items-center'>
           <EmptyState
-            shouldFocus={filtres.length > 0}
+            shouldFocus={shouldFocus || filtres.length > 0}
             illustrationName={IllustrationName.Checklist}
             titre={
               filtres.length === 0
diff --git a/components/rdv/TableauEvenementsConseiller.tsx b/components/rdv/TableauEvenementsConseiller.tsx
index 0b268d073..8548f6750 100644
--- a/components/rdv/TableauEvenementsConseiller.tsx
+++ b/components/rdv/TableauEvenementsConseiller.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { AgendaRow } from 'components/rdv/AgendaRow'
 import Table from 'components/ui/Table/Table'
@@ -9,12 +9,15 @@ type TableauEvenementsConseillerProps = {
   periodeLabel: string
 }
 
-export default function TableauEvenementsConseiller({
-  evenements,
-  periodeLabel,
-}: TableauEvenementsConseillerProps) {
+function TableauEvenementsConseiller(
+  { evenements, periodeLabel }: TableauEvenementsConseillerProps,
+  ref: ForwardedRef<HTMLTableElement>
+) {
   return (
-    <Table caption={{ text: 'Liste de mes événements ' + periodeLabel }}>
+    <Table
+      caption={{ text: 'Liste de mes événements ' + periodeLabel }}
+      ref={ref}
+    >
       <thead className='sr-only'>
         <tr>
           <th scope='col'>Horaires et durée</th>
@@ -33,3 +36,5 @@ export default function TableauEvenementsConseiller({
     </Table>
   )
 }
+
+export default forwardRef(TableauEvenementsConseiller)
diff --git a/components/ui/SelecteurPeriode.tsx b/components/ui/SelecteurPeriode.tsx
index ae4eccc7d..93e2ea86f 100644
--- a/components/ui/SelecteurPeriode.tsx
+++ b/components/ui/SelecteurPeriode.tsx
@@ -1,17 +1,16 @@
 import { DateTime } from 'luxon'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
 
 import Button, { ButtonStyle } from './Button/Button'
 import IconComponent, { IconName } from './IconComponent'
 
 import { toLongMonthDate, toShortDate } from 'utils/date'
+import { useDebounce } from 'utils/hooks/useDebounce'
 
 type SelecteurPeriodeProps = {
   onNouvellePeriode: (
-    indexPeriode: number,
-    dateDebut: DateTime,
-    dateFin: DateTime,
-    label: string
+    periode: { index: number; dateDebut: DateTime; dateFin: DateTime },
+    opts: { label: string; shouldFocus: boolean }
   ) => void
   trackNavigation: (append?: string) => void
   periodeCourante: number
@@ -23,11 +22,12 @@ export function SelecteurPeriode({
   periodeCourante,
 }: SelecteurPeriodeProps): ReactElement {
   const AUJOURDHUI = DateTime.now().startOf('day')
+  const isFirstRender = useRef<boolean>(true)
 
   const [indexPeriodeAffichee, setIndexPeriodeAffichee] = useState<number>(
     periodeCourante ?? 0
   )
-  const [periodeAffiche, setPeriodeAffiche] = useState<{
+  const [periodeAffichee, setPeriodeAffichee] = useState<{
     debut: DateTime
     fin: DateTime
     longLabel: string
@@ -37,6 +37,14 @@ export function SelecteurPeriode({
     return { debut, fin, longLabel: labelPeriode(debut, fin, 'long') }
   })
 
+  const [periodeInput, setPeriodeInput] = useState<string>(
+    periodeAffichee.debut.toISODate()
+  )
+  const debouncedPeriode = useDebounce(periodeInput, 500)
+
+  const regexDate = /^\d{4}-(0\d|1[0-2])-([0-2]\d|3[01])$/
+  const [shouldFocusOnChange, setShouldFocusOnChange] = useState<boolean>(false)
+
   function jourDeDebutDeLaPeriode(indexPeriode: number): DateTime {
     return AUJOURDHUI.plus({
       day: 7 * indexPeriode,
@@ -58,96 +66,150 @@ export function SelecteurPeriode({
 
   async function allerPeriodePrecedente() {
     setIndexPeriodeAffichee(indexPeriodeAffichee - 1)
+    setShouldFocusOnChange(false)
     trackNavigation('passés')
   }
 
   async function allerPeriodeSuivante() {
     setIndexPeriodeAffichee(indexPeriodeAffichee + 1)
+    setShouldFocusOnChange(false)
     trackNavigation('futurs')
   }
 
   async function allerPeriodeActuelle() {
     setIndexPeriodeAffichee(0)
+    setShouldFocusOnChange(true)
     trackNavigation()
   }
 
+  function changerPeriode(debutPeriodeInput: string) {
+    if (!debutPeriodeInput) return
+    if (!regexDate.test(debutPeriodeInput)) return
+
+    const debutPeriode = DateTime.fromISO(debutPeriodeInput).set({
+      weekday: AUJOURDHUI.weekday,
+    })
+    setIndexPeriodeAffichee(debutPeriode.diff(AUJOURDHUI, 'week').weeks)
+    setShouldFocusOnChange(true)
+    trackNavigation('manuel')
+  }
+
   useEffect(() => {
     const debut = jourDeDebutDeLaPeriode(indexPeriodeAffichee)
     const fin = jourDeFinDeLaPeriode(indexPeriodeAffichee)
     const label = labelPeriode(debut, fin, 'long')
-    onNouvellePeriode(indexPeriodeAffichee, debut, fin, label)
-    setPeriodeAffiche({ debut, fin, longLabel: label })
+    onNouvellePeriode(
+      { index: indexPeriodeAffichee, dateDebut: debut, dateFin: fin },
+      { label, shouldFocus: shouldFocusOnChange }
+    )
+    setPeriodeAffichee({ debut, fin, longLabel: label })
   }, [indexPeriodeAffichee])
 
+  useEffect(() => {
+    if (!isFirstRender.current) changerPeriode(debouncedPeriode)
+  }, [debouncedPeriode])
+
+  useEffect(() => {
+    isFirstRender.current = false
+    return () => {
+      isFirstRender.current = true
+    }
+  }, [])
+
   return (
-    <div className='flex flex-wrap items-end gap-6 w-fit'>
-      <p
-        className='flex flex-col text-base-medium'
-        aria-live='polite'
-        aria-atomic={true}
-      >
-        Période :{' '}
-        <span
-          className='text-m-bold text-primary self-center'
-          aria-label={labelPeriode(
-            periodeAffiche.debut,
-            periodeAffiche.fin,
+    <fieldset className='flex flex-wrap items-center gap-2 w-fit'>
+      <legend className='sr-only' aria-live='polite' aria-atomic={true}>
+        Période : {periodeAffichee.longLabel}
+      </legend>
+
+      <button onClick={allerPeriodePrecedente} type='button'>
+        <span className='sr-only'>
+          Aller à la période précédente{' '}
+          {labelPeriode(
+            jourDeDebutDeLaPeriode(indexPeriodeAffichee - 1),
+            jourDeFinDeLaPeriode(indexPeriodeAffichee - 1),
             'long'
           )}
-        >
-          {labelPeriode(periodeAffiche.debut, periodeAffiche.fin, 'short')}
         </span>
-      </p>
-
-      <div className='flex items-center col-start-2 row-start-2'>
-        <button
-          aria-label={
+        <IconComponent
+          name={IconName.ChevronLeft}
+          className='w-6 h-6 fill-primary hover:fill-primary_darken'
+          focusable={false}
+          aria-hidden={true}
+          title={
             `Aller à la période précédente ` +
             labelPeriode(
               jourDeDebutDeLaPeriode(indexPeriodeAffichee - 1),
               jourDeFinDeLaPeriode(indexPeriodeAffichee - 1),
-              'long'
+              'short'
             )
           }
-          onClick={allerPeriodePrecedente}
-          type='button'
-        >
-          <IconComponent
-            name={IconName.ChevronLeft}
-            className='w-6 h-6 fill-primary mr-2 hover:fill-primary_darken'
-            focusable={false}
-            title='Aller à la période précédente'
-          />
-        </button>
-        <Button
-          type='button'
-          style={ButtonStyle.SECONDARY}
-          onClick={allerPeriodeActuelle}
-          disabled={indexPeriodeAffichee === 0}
-        >
-          <span className='sr-only'>Aller à la </span>Période en cours
-          <span className='sr-only'> {periodeAffiche.longLabel}</span>
-        </Button>
-        <button
-          aria-label={
+        />
+      </button>
+
+      <label htmlFor='debut-periode'>
+        <span className='sr-only'>Début période : </span>
+        Du{' '}
+      </label>
+      <input
+        id='debut-periode'
+        type='date'
+        value={periodeInput}
+        onChange={(e) => setPeriodeInput(e.target.value)}
+        step={7}
+        className='text-base-bold border-b'
+      />
+
+      <label htmlFor='fin-periode'>
+        <span className='sr-only'>Fin période : </span>
+        au{' '}
+      </label>
+      <input
+        id='fin-periode'
+        type='date'
+        value={periodeAffichee.fin.toISODate()}
+        readOnly={true}
+      />
+
+      <button onClick={allerPeriodeSuivante} type='button'>
+        <span className='sr-only'>
+          Aller à la période suivante{' '}
+          {labelPeriode(
+            jourDeDebutDeLaPeriode(indexPeriodeAffichee + 1),
+            jourDeFinDeLaPeriode(indexPeriodeAffichee + 1),
+            'long'
+          )}
+        </span>
+        <IconComponent
+          name={IconName.ChevronRight}
+          className='w-6 h-6 fill-primary hover:fill-primary_darken'
+          focusable={false}
+          aria-hidden={true}
+          title={
             `Aller à la période suivante ` +
             labelPeriode(
               jourDeDebutDeLaPeriode(indexPeriodeAffichee + 1),
               jourDeFinDeLaPeriode(indexPeriodeAffichee + 1),
-              'long'
+              'short'
             )
           }
-          onClick={allerPeriodeSuivante}
-          type='button'
-        >
-          <IconComponent
-            name={IconName.ChevronRight}
-            className='w-6 h-6 fill-primary ml-2 hover:fill-primary_darken'
-            focusable={false}
-            title='Aller à la période suivante'
-          />
-        </button>
-      </div>
-    </div>
+        />
+      </button>
+
+      <Button
+        type='button'
+        style={ButtonStyle.SECONDARY}
+        onClick={allerPeriodeActuelle}
+        disabled={indexPeriodeAffichee === 0}
+        className='!py-0'
+        label={`Aller à la période en cours ${labelPeriode(
+          jourDeDebutDeLaPeriode(0),
+          jourDeFinDeLaPeriode(0),
+          'long'
+        )}`}
+      >
+        Période en cours
+      </Button>
+    </fieldset>
   )
 }
diff --git a/styles/globals.css b/styles/globals.css
index d297dbe23..1833c7d29 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -69,7 +69,7 @@ select:disabled {
   cursor: not-allowed;
 }
 
-[type='date'] {
+[type='date']:not(:read-only) {
   cursor: pointer;
 }
 
diff --git a/tests/pages/agenda/AgendaConseiller.page.test.tsx b/tests/pages/agenda/AgendaConseiller.page.test.tsx
index cf7a2b823..e95f703bc 100644
--- a/tests/pages/agenda/AgendaConseiller.page.test.tsx
+++ b/tests/pages/agenda/AgendaConseiller.page.test.tsx
@@ -167,7 +167,7 @@ describe('Agenda - Onglet conseiller', () => {
         name: 'Aller à la période précédente du 25 août 2022 au 31 août 2022',
       })
       const buttonPeriodeCourante = screen.getByRole('button', {
-        name: 'Aller à la Période en cours du 1 septembre 2022 au 7 septembre 2022',
+        name: 'Aller à la période en cours du 1 septembre 2022 au 7 septembre 2022',
       })
       const periodeFutureButton = screen.getByRole('button', {
         name: 'Aller à la période suivante du 8 septembre 2022 au 14 septembre 2022',
diff --git a/tests/pages/agenda/AgendaEtablissement.page.test.tsx b/tests/pages/agenda/AgendaEtablissement.page.test.tsx
index d634493f4..5b487e66b 100644
--- a/tests/pages/agenda/AgendaEtablissement.page.test.tsx
+++ b/tests/pages/agenda/AgendaEtablissement.page.test.tsx
@@ -211,7 +211,7 @@ describe('Agenda - Onglet établissement', () => {
         name: 'Aller à la période précédente du 25 août 2022 au 31 août 2022',
       })
       const periodeCouranteButton = screen.getByRole('button', {
-        name: 'Aller à la Période en cours du 1 septembre 2022 au 7 septembre 2022',
+        name: 'Aller à la période en cours du 1 septembre 2022 au 7 septembre 2022',
       })
       const periodesFuturesButton = screen.getByRole('button', {
         name: 'Aller à la période suivante du 8 septembre 2022 au 14 septembre 2022',
@@ -245,6 +245,33 @@ describe('Agenda - Onglet établissement', () => {
       )
     })
 
+    it('permet d’accéder directement à une période de 7 jours', async () => {
+      // Given
+      const periodeInput = screen.getByLabelText('Début période : Du')
+
+      // When
+      await userEvent.clear(periodeInput)
+      await userEvent.type(periodeInput, '2022-08-28')
+      await waitForDebounce(500)
+      // Then
+      expect(getRendezVousEtablissement).toHaveBeenLastCalledWith(
+        'id-etablissement',
+        AOUT_25_0H,
+        AOUT_31_23H
+      )
+
+      // When
+      await userEvent.clear(periodeInput)
+      await userEvent.type(periodeInput, '2022-09-10')
+      await waitForDebounce(500)
+      // Then
+      expect(getRendezVousEtablissement).toHaveBeenLastCalledWith(
+        'id-etablissement',
+        SEPTEMBRE_8_0H,
+        SEPTEMBRE_14_23H
+      )
+    })
+
     it('permet de rechercher un événement', async () => {
       //Given
       const inputRechercheAgenda = screen.getByRole('textbox', {
@@ -442,7 +469,7 @@ describe('Agenda - Onglet établissement', () => {
         name: 'Aller à la période précédente du 25 août 2022 au 31 août 2022',
       })
       const periodeCouranteButton = screen.getByRole('button', {
-        name: 'Aller à la Période en cours du 1 septembre 2022 au 7 septembre 2022',
+        name: 'Aller à la période en cours du 1 septembre 2022 au 7 septembre 2022',
       })
       const periodesFuturesButton = screen.getByRole('button', {
         name: 'Aller à la période suivante du 8 septembre 2022 au 14 septembre 2022',
@@ -581,3 +608,7 @@ describe('Agenda - Onglet établissement', () => {
     })
   })
 })
+
+async function waitForDebounce(ms: number): Promise<void> {
+  await act(() => new Promise((r) => setTimeout(r, ms)))
+}