diff --git a/src/components/Navbar/ReadyButton/ReadyButton.jsx b/src/components/Navbar/ReadyButton/ReadyButton.jsx
index 86d40ed..4d5a2b2 100644
--- a/src/components/Navbar/ReadyButton/ReadyButton.jsx
+++ b/src/components/Navbar/ReadyButton/ReadyButton.jsx
@@ -1,8 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { SocketContext } from '../../../App';
 import Switch from '@mui/material/Switch';
-import '../Navbar.css';
-import '../NameContainer/AnimatedOverlay/TimerAnimation';
+import styles from './ReadyButton.module.css';
 
 const ReadyButton = ({ isReady }) => {
     const socket = useContext(SocketContext);
@@ -13,7 +12,7 @@ const ReadyButton = ({ isReady }) => {
         setChecked(!checked);
     };
     return (
-        <div className='ready-container'>
+        <div className={styles.container}>
             <Switch onChange={handleCheckboxChange} checked={checked || false} />
             <label>{checked ? 'I want to play' : 'Im waiting'}</label>
         </div>
diff --git a/src/components/Navbar/ReadyButton/ReadyButton.module.css b/src/components/Navbar/ReadyButton/ReadyButton.module.css
new file mode 100644
index 0000000..8656421
--- /dev/null
+++ b/src/components/Navbar/ReadyButton/ReadyButton.module.css
@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px;
+    flex-direction: column;
+    flex-flow: row-reverse;
+    background-color: grey;
+    border-radius: 10px;
+    border: 2px solid white;
+}
+.container > label {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 100px;
+    color: white;
+}
diff --git a/src/components/Navbar/ReadyButton/ReadyButton.test.js b/src/components/Navbar/ReadyButton/ReadyButton.test.js
new file mode 100644
index 0000000..325587c
--- /dev/null
+++ b/src/components/Navbar/ReadyButton/ReadyButton.test.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ReadyButton from './ReadyButton';
+import { SocketContext } from '../../../App';
+
+const mockSocket = {
+    emit: jest.fn(),
+};
+
+describe('ReadyButton component', () => {
+    it('renders without crashing', () => {
+        render(
+            <SocketContext.Provider value={mockSocket}>
+                <ReadyButton isReady={false} />
+            </SocketContext.Provider>
+        );
+    });
+
+    it('emits "player:ready" event and toggles switch on change', () => {
+        render(
+            <SocketContext.Provider value={mockSocket}>
+                <ReadyButton isReady={false} />
+            </SocketContext.Provider>
+        );
+
+        const switchElement = screen.getByRole('checkbox');
+        fireEvent.click(switchElement);
+
+        expect(mockSocket.emit).toHaveBeenCalledWith('player:ready');
+        expect(switchElement).toBeChecked();
+    });
+
+    it('displays correct label when switch is checked', () => {
+        render(
+            <SocketContext.Provider value={mockSocket}>
+                <ReadyButton isReady={true} />
+            </SocketContext.Provider>
+        );
+
+        const labelElement = screen.getByText('I want to play');
+        expect(labelElement).toBeInTheDocument();
+    });
+
+    it('displays correct label when switch is not checked', () => {
+        render(
+            <SocketContext.Provider value={mockSocket}>
+                <ReadyButton isReady={false} />
+            </SocketContext.Provider>
+        );
+
+        const labelElement = screen.getByText('Im waiting');
+        expect(labelElement).toBeInTheDocument();
+    });
+});