diff --git a/app/[chapter]/[subchapter]/quiz/page.tsx b/app/[chapter]/[subchapter]/quiz/page.tsx
index 20cb0f4..eff4943 100644
--- a/app/[chapter]/[subchapter]/quiz/page.tsx
+++ b/app/[chapter]/[subchapter]/quiz/page.tsx
@@ -63,6 +63,7 @@ export default function QuizPage({
     return (
       <StartScreen
         onClickStart={() => {
+          console.log('quiz_started');
           posthog.capture('quiz_started', {
             questionsCount: questions.length,
           });
diff --git a/components/button.tsx b/components/button.tsx
index 566a866..ebb6447 100644
--- a/components/button.tsx
+++ b/components/button.tsx
@@ -1,6 +1,8 @@
 import { cn } from '@/lib/utils';
 
-type ButtonProps = React.HTMLProps<HTMLButtonElement>;
+type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
+  onClick?: () => void;
+};
 
 const Button = (props: ButtonProps) => {
   return (
diff --git a/components/faqAccordion.tsx b/components/faqAccordion.tsx
index 05127db..c4e198a 100644
--- a/components/faqAccordion.tsx
+++ b/components/faqAccordion.tsx
@@ -9,7 +9,7 @@ function AccordionItem({ title, content, initiallyOpen = false }: any) {
       <h2>
         <button
           type='button'
-          className='flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 first:rounded-t-xl focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 gap-3'
+          className='flex w-full items-center justify-between gap-3 border border-b-0 border-gray-200 p-5 font-medium text-gray-500 first:rounded-t-xl hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 rtl:text-right'
           onClick={() => setIsOpen(!isOpen)}
           aria-expanded={isOpen}
           aria-controls={`accordion-body-${title
@@ -19,7 +19,7 @@ function AccordionItem({ title, content, initiallyOpen = false }: any) {
           <span className='flex items-center'>{title}</span>
           <svg
             data-accordion-icon
-            className={`w-3 h-3 shrink-0 transition-transform ${
+            className={`h-3 w-3 shrink-0 transition-transform ${
               isOpen ? 'rotate-180' : ''
             }`}
             aria-hidden='true'
@@ -38,7 +38,7 @@ function AccordionItem({ title, content, initiallyOpen = false }: any) {
         </button>
       </h2>
       <div
-        className={`p-5 border border-b-0 border-gray-200 max-w-[1280px] mb-2 text-gray-500 ${
+        className={`mb-2 max-w-[1280px] border border-b-0 border-gray-200 p-5 text-gray-500 ${
           isOpen ? '' : 'hidden'
         }`}
       >
diff --git a/components/option.tsx b/components/option.tsx
index f67e8a5..18643a3 100644
--- a/components/option.tsx
+++ b/components/option.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 export interface OptionProps extends React.HTMLProps<HTMLButtonElement> {
   index?: number;
@@ -8,7 +9,8 @@ export interface OptionProps extends React.HTMLProps<HTMLButtonElement> {
   isSelected: boolean;
   isCorrect: boolean;
   showSolution: boolean;
-  onClick: () => void;
+  onSelect: () => void;
+  keyboardShortcut: string;
 }
 
 const Option: React.FC<OptionProps> = ({
@@ -18,7 +20,8 @@ const Option: React.FC<OptionProps> = ({
   isSelected,
   isCorrect,
   showSolution,
-  onClick,
+  onSelect,
+  keyboardShortcut,
   ...props
 }) => {
   const optionClasses = classNames(
@@ -34,11 +37,17 @@ const Option: React.FC<OptionProps> = ({
     }
   );
 
+  useHotkeys(keyboardShortcut, () => {
+    if (showSolution) return;
+    onSelect();
+    (document.activeElement as HTMLElement)?.blur();
+  });
+
   return (
     <button
+      onClick={onSelect}
       {...props}
       type='button'
-      onClick={onClick}
       className={optionClasses}
     >
       <div className='flex items-center gap-3 align-middle'>
diff --git a/components/question/optionsList.tsx b/components/question/optionsList.tsx
index 01540c1..8441b39 100644
--- a/components/question/optionsList.tsx
+++ b/components/question/optionsList.tsx
@@ -22,12 +22,13 @@ export const OptionsList = ({
         return (
           <Option
             key={option}
+            keyboardShortcut={(optionIndex + 1).toString()}
             isSelected={isSelected}
             isCorrect={correctIndices.includes(optionIndex)}
             showSolution={showSolution}
             label={option}
             disabled={showSolution}
-            onClick={() => onOptionClick(optionIndex)}
+            onSelect={() => onOptionClick(optionIndex)}
           />
         );
       })}
diff --git a/components/question/question.tsx b/components/question/question.tsx
index 319ab9a..aaa30ae 100644
--- a/components/question/question.tsx
+++ b/components/question/question.tsx
@@ -8,6 +8,8 @@ import { SolutionDisplay } from './solutionDisplay';
 import { shuffleOptionsWithCorrectIndices } from '@/lib/utils';
 import NoSSR from '../NoSSR';
 import { usePostHog } from 'posthog-js/react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { KeyboardKeys } from '../quiz/keyboardKeys';
 
 type ExerciseProps = {
   question: Question;
@@ -71,6 +73,25 @@ const QuestionComponent: React.FC<ExerciseProps> = ({
 
   const posthog = usePostHog();
 
+  const handleAnswerCheck = () => {
+    const isFirstTry = retriesCounter === 0;
+    posthog.capture('question_answered', {
+      questionIndex: questionIndexToShow,
+      isCorrect,
+      isFirstTry,
+      selectedOptionIndices: Array.from(selectedOptionIndices),
+      correctIndices: shuffledQuestion.correctIndices,
+      retriesCount: retriesCounter,
+      maxRetries,
+      randomizeOptions,
+    });
+
+    onAnswerCheck(isCorrect, isFirstTry);
+    setRetriesCounter((prev) => prev + 1);
+  };
+
+  useHotkeys('enter', handleAnswerCheck);
+
   return (
     <div className='mb-6 max-w-7xl rounded-lg border border-gray-200 bg-white p-6'>
       {questionIndexToShow !== undefined && (
@@ -122,28 +143,15 @@ const QuestionComponent: React.FC<ExerciseProps> = ({
           <button
             type='button'
             disabled={selectedOptionIndices.size === 0}
-            onClick={() => {
-              const isFirstTry = retriesCounter === 0;
-              posthog.capture('question_answered', {
-                questionIndex: questionIndexToShow,
-                isCorrect,
-                isFirstTry,
-                selectedOptionIndices: Array.from(selectedOptionIndices),
-                correctIndices: shuffledQuestion.correctIndices,
-                retriesCount: retriesCounter,
-                maxRetries,
-                randomizeOptions,
-              });
-
-              onAnswerCheck(isCorrect, isFirstTry);
-              setRetriesCounter((prev) => prev + 1);
-            }}
+            onClick={() => handleAnswerCheck()}
             className='mb-2 me-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 disabled:cursor-not-allowed disabled:bg-gray-200'
           >
             Check answer
           </button>
         )}
 
+        <KeyboardKeys questionsAmount={question.options.length} />
+
         {nextQuestionButton}
       </div>
     </div>
diff --git a/components/quiz/keyboardKeys.tsx b/components/quiz/keyboardKeys.tsx
index 74b2b3b..519fee8 100644
--- a/components/quiz/keyboardKeys.tsx
+++ b/components/quiz/keyboardKeys.tsx
@@ -1,18 +1,18 @@
-export function KeyboardKeys() {
+export function KeyboardKeys({ questionsAmount }: { questionsAmount: number }) {
   return (
-    <p className='text-gray-500 hidden lg:block'>
+    <p className='hidden text-sm text-gray-500 lg:block'>
       You can use keys{' '}
-      <kbd className='px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg'>
+      <kbd className='rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800'>
         1
       </kbd>{' '}
       to{' '}
-      <kbd className='px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg'>
-        7
+      <kbd className='rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800'>
+        {questionsAmount}
       </kbd>
       {' or '}
-      <kbd className='inline-flex items-center px-2 py-1.5 text-gray-800 bg-gray-100 border border-gray-200 rounded-lg'>
+      <kbd className='inline-flex items-center rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-gray-800'>
         <svg
-          className='w-2.5 h-2.5'
+          className='h-2.5 w-2.5'
           aria-hidden='true'
           xmlns='http://www.w3.org/2000/svg'
           fill='currentColor'
@@ -22,9 +22,9 @@ export function KeyboardKeys() {
         </svg>
         <span className='sr-only'>Arrow key up</span>
       </kbd>{' '}
-      <kbd className='inline-flex items-center px-2 py-1.5 text-gray-800 bg-gray-100 border border-gray-200 rounded-lg'>
+      <kbd className='inline-flex items-center rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-gray-800'>
         <svg
-          className='w-2.5 h-2.5'
+          className='h-2.5 w-2.5'
           aria-hidden='true'
           xmlns='http://www.w3.org/2000/svg'
           fill='currentColor'
@@ -35,7 +35,7 @@ export function KeyboardKeys() {
         <span className='sr-only'>Arrow key down</span>
       </kbd>
       {' + '}
-      <kbd className='px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg'>
+      <kbd className='rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800'>
         Enter
       </kbd>{' '}
       to navigate the quiz.
diff --git a/package.json b/package.json
index 6248688..98855f5 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,10 @@
     "next": "14.1.3",
     "posthog-js": "^1.121.4",
     "posthog-node": "^4.0.0",
-    "react": "^18",
+    "react": "^18.2.0",
     "react-canvas-confetti": "^2.0.7",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "^4.5.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -34,8 +35,8 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.2",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49fe773..de74214 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,14 +39,17 @@ dependencies:
     specifier: ^4.0.0
     version: 4.0.0
   react:
-    specifier: ^18
+    specifier: ^18.2.0
     version: 18.2.0
   react-canvas-confetti:
     specifier: ^2.0.7
     version: 2.0.7(react@18.2.0)
   react-dom:
-    specifier: ^18
+    specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-hotkeys-hook:
+    specifier: ^4.5.0
+    version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
   tailwind-merge:
     specifier: ^2.2.2
     version: 2.3.0
@@ -65,10 +68,10 @@ devDependencies:
     specifier: ^20
     version: 20.12.7
   '@types/react':
-    specifier: ^18
+    specifier: ^18.2.0
     version: 18.2.78
   '@types/react-dom':
-    specifier: ^18
+    specifier: ^18.2.0
     version: 18.2.25
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.21.0
@@ -4043,6 +4046,16 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
+  /react-hotkeys-hook@4.5.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==}
+    peerDependencies:
+      react: '>=16.8.1'
+      react-dom: '>=16.8.1'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true