diff --git a/src/tutorial/styles.scss b/src/tutorial/styles.scss
index 1c13945..5cd0747 100644
--- a/src/tutorial/styles.scss
+++ b/src/tutorial/styles.scss
@@ -28,3 +28,11 @@
 
   }
 }
+
+.tutorialsText {
+  padding: 0.5rem 0.5rem;
+}
+
+.tutorialsText:hover {
+  background: #e8e8e8;
+}
diff --git a/src/tutorial/tutorial.test.tsx b/src/tutorial/tutorial.test.tsx
new file mode 100644
index 0000000..6c8ab33
--- /dev/null
+++ b/src/tutorial/tutorial.test.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { showModal } from "@openmrs/esm-framework";
+import Tutorial from "./tutorial";
+
+jest.mock('@openmrs/esm-framework', () => ({
+	showModal: jest.fn(),
+}))
+
+describe('Tutorial Component', () => {
+	it('renders the menu item with the correct label', () => {
+		render(<Tutorial />);
+
+		expect(screen.getByText(/Tutorials/i)).toBeInTheDocument();
+	})
+
+	it('calls showModal when the menu item is clicked', () => {
+		render(<Tutorial />);
+
+		const menuItem = screen.getByText(/Tutorials/i);
+		fireEvent.click(menuItem);
+
+		expect(showModal).toHaveBeenCalledWith('tutorial-modal', expect.any(Object))
+	})
+})
\ No newline at end of file
diff --git a/src/tutorial/tutorial.tsx b/src/tutorial/tutorial.tsx
index e02e8d0..fe6d986 100644
--- a/src/tutorial/tutorial.tsx
+++ b/src/tutorial/tutorial.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { showModal } from '@openmrs/esm-framework';
+import styles from './styles.scss'
 
 const Tutorial = () => {
   const { t } = useTranslation();
@@ -13,7 +14,7 @@ const Tutorial = () => {
 
   return (
     <>
-      <div onClick={handleOpenModal}>{t('tutorials', 'Tutorials')}</div>
+      <div onClick={handleOpenModal} className={styles.tutorialsText}>{t('tutorials', 'Tutorials')}</div>
     </>
   );
 };