diff --git a/src/App.css b/src/App.css
index e5deef95..52bae846 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,71 +1,29 @@
-html, body, #root, .stopwatch, .stopwatch-content, .stopwatch-buttons {
-  height: -webkit-fill-available;
+body{
+  font-family: 'roboto', sans-serif;
 }
 
-body {
-  background-color: #f1f1f1;
-  margin: 0px;
-}
-
-.stopwatch-title {
-  background-color: #303030;
-  margin: 0px;
-  color: white;
-  padding-left: 16px;
-  padding: 10px 0px 10px 16px;
-}
-
-.stopwatch-content {
-  display: flex;
-}
-
-.stopwatch-buttons {
+.container{
   display: flex;
   flex-direction: column;
-  background-color: #ebebeb;
-  padding: 16px 12px;
-  width: 200px;
+  justify-content: center;
+  align-items: center;
 }
 
-.stopwatch-buttons button:focus {
-  outline: none;
-  border: 2px solid #000000;
+.stopwatch-display{
+  font-size: 100px;
+  font-family: 'roboto mono', monospace;
 }
 
-.stopwatch-buttons button {
-  margin: 7px 0px;
-  background-color: #fafafa;
-  border: 0px solid #fafafa;
-  text-align: left;
-  border-radius: 0.5rem;
-  padding: 7px 0px 7px 15px;
-  box-shadow: 0.5px 0.5px gray;
+.button{
+  margin: 0.5em;
+  font-size: 25px;
+  width: 7rem;
+  padding: 0.5em;
 }
 
-.stopwatch-time {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 20px;
-  padding: 50px;
-  background-color: #ffffff;
-  height: fit-content;
-  border-radius: 0.75rem;
-  width: 50%;
-  text-align: -webkit-center;
-  box-shadow: 0.5px 0.5px gray;
-}
-
-.stopwatch-time p {
-  font-size: xxx-large;
-}
-
-.stopwatch-laptimes ul {
-  list-style: none;
-  padding: 0px;
+.lap-list{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
-
-.stopwatch-laptimes li {
-  padding: 10px 0px;
-  border-bottom: 1px solid #ebebeb;
-  font-size: x-large;
-}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 8c90fc53..77f3e2d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,12 @@
 import React from 'react'
-import './App.css'
 import StopWatch from './StopWatch'
+import './App.css'
+
 
 export default function App() {
     return(
-        <StopWatch />
+        <div>
+            <StopWatch />
+        </div>
     )
 }
\ No newline at end of file
diff --git a/src/StopWatch.test.tsx b/src/StopWatch.test.tsx
index 643343c3..6196f90d 100644
--- a/src/StopWatch.test.tsx
+++ b/src/StopWatch.test.tsx
@@ -1,68 +1,87 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import StopWatch, { formatTime } from './StopWatch';
+import { render, fireEvent } from '@testing-library/react'; // Import render and fireEvent from testing-library
+import StopWatchButton from './StopWatchButton'; // Import the StopWatchButton component
+import StopWatch from './StopWatch'; // Import the StopWatch component
 
-// Test the formatTime function
-describe('formatTime', () => {
-  test('formats time less than an hour correctly', () => {
-    expect(formatTime(5900)).toBe('00:59:00');
-    expect(formatTime(6000)).toBe('01:00:00');
-    expect(formatTime(359900)).toBe('59:59:00');
+describe('StopWatch component', () => {
+  // Test to ensure that the StopWatch component renders without crashing
+  test('renders without crashing', () => {
+    render(<StopWatch />);
   });
 
-  test('formats time greater than an hour correctly', () => {
-    expect(formatTime(360000)).toBe('01:00:00:00');
-    expect(formatTime(366100)).toBe('01:01:01:00');
+  // Test to check if clicking the start button triggers the onStart function
+  test('clicking start button triggers onStart function', () => {
+    // Create a mock function for onStart
+    const onStart = jest.fn();
+    // Render the StopWatchButton component with the mock onStart function
+    const { getByText } = render(<StopWatchButton onStart={onStart} onStop={function (): void {
+      throw new Error('Function not implemented.');
+    } } onLap={function (): void {
+      throw new Error('Function not implemented.');
+    } } onReset={function (): void {
+      throw new Error('Function not implemented.');
+    } } />);
+
+    // Simulate a click on the start button
+    fireEvent.click(getByText('Start'));
+    // Assert that onStart function has been called
+    expect(onStart).toHaveBeenCalled();
   });
-});
 
-test('renders correctly', () => {
-  const { getByText } = render(<StopWatch />);
-  const stopwatchElement = getByText('StopWatch');
-  expect(stopwatchElement).not.toBeNull();
-});
+  // Test to check if clicking the stop button triggers the onStop function
+  test('clicking stop button triggers onStop function', () => {
+    // Create a mock function for onStop
+    const onStop = jest.fn();
+    // Render the StopWatchButton component with the mock onStop function
+    const { getByText } = render(<StopWatchButton onStop={onStop} onStart={function (): void {
+      throw new Error('Function not implemented.');
+    } } onLap={function (): void {
+      throw new Error('Function not implemented.');
+    } } onReset={function (): void {
+      throw new Error('Function not implemented.');
+    } } />);
 
-// Use fake timers for timer-related tests
-jest.useFakeTimers();
+    // Simulate a click on the stop button
+    fireEvent.click(getByText('Stop'));
+    // Assert that onStop function has been called
+    expect(onStop).toHaveBeenCalled();
+  });
 
-test('starts timer when start button is clicked', () => {
-  const setIntervalSpy = jest.spyOn(global, 'setInterval');
-  render(<StopWatch />);
-  const startButton = screen.getByRole('button', { name: /start/i });
-  fireEvent.click(startButton);
-  jest.advanceTimersByTime(1000);
-  expect(setIntervalSpy).toHaveBeenCalledTimes(1);
-  expect(setIntervalSpy).toHaveBeenLastCalledWith(expect.any(Function), 10);
-});
+  // Test to check if clicking the lap button triggers the onLap function
+  test('clicking lap button triggers onLap function', () => {
+    // Create a mock function for onLap
+    const onLap = jest.fn();
+    // Render the StopWatchButton component with the mock onLap function
+    const { getByText } = render(<StopWatchButton onLap={onLap} onStart={function (): void {
+      throw new Error('Function not implemented.');
+    } } onStop={function (): void {
+      throw new Error('Function not implemented.');
+    } } onReset={function (): void {
+      throw new Error('Function not implemented.');
+    } } />);
 
-test('stops timer when stop button is clicked', () => {
-  const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
-  const setIntervalSpy = jest.spyOn(global, 'setInterval');
-  setIntervalSpy.mockImplementation(() => 123 as unknown as NodeJS.Timeout);
-  render(<StopWatch />);
-  const startButton = screen.getByRole('button', { name: /start/i });
-  fireEvent.click(startButton);
-  jest.advanceTimersByTime(1000);
-  const stopButton = screen.getByRole('button', { name: /stop/i });
-  fireEvent.click(stopButton);
-  expect(clearIntervalSpy).toHaveBeenCalledWith(123);
-});
+    // Simulate a click on the lap button
+    fireEvent.click(getByText('Lap'));
+    // Assert that onLap function has been called
+    expect(onLap).toHaveBeenCalled();
+  });
 
-beforeEach(() => {
-  jest.useRealTimers();
-});
+  // Test to check if clicking the reset button triggers the onReset function
+  test('clicking reset button triggers onReset function', () => {
+    // Create a mock function for onReset
+    const onReset = jest.fn();
+    // Render the StopWatchButton component with the mock onReset function
+    const { getByText } = render(<StopWatchButton onReset={onReset} onStart={function (): void {
+      throw new Error('Function not implemented.');
+    } } onStop={function (): void {
+      throw new Error('Function not implemented.');
+    } } onLap={function (): void {
+      throw new Error('Function not implemented.');
+    } } />);
 
-afterEach(() => {
-  jest.useFakeTimers();
-  jest.clearAllMocks();
+    // Simulate a click on the reset button
+    fireEvent.click(getByText('Reset'));
+    // Assert that onReset function has been called
+    expect(onReset).toHaveBeenCalled();
+  });
 });
-
-test('resets timer when reset button is clicked', () => {
-  const { getByRole, getByText } = render(<StopWatch />);
-  const startButton = getByRole('button', { name: /start/i });
-  fireEvent.click(startButton);
-  jest.advanceTimersByTime(1000);
-  const resetButton = getByRole('button', { name: /reset/i });
-  fireEvent.click(resetButton);
-  expect(getByText('00:00:00')).not.toBeNull();
-});
\ No newline at end of file
diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
index 2e06473c..a6f37ce3 100644
--- a/src/StopWatch.tsx
+++ b/src/StopWatch.tsx
@@ -1,77 +1,97 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import StopWatchButton from './StopWatchButton'
+import React, { useState, useRef, useEffect } from "react";
+import StopWatchButton from "./StopWatchButton";
+
+export default function StopWatch() {
+  // Define state variables using the useState hook
+  const [startTime, setStartTime] = useState<number>(null); // Start time of the stopwatch
+  const [elaspedTime, setElaspedTime] = useState<number>(null); // Elapsed time since starting the stopwatch
+  const [isRunning, setIsRunning] = useState<boolean>(null); // Flag to indicate if the stopwatch is running or not
+  const [lapHistory, setLapHistory] = useState<number[]>([]); // Array to store lap times
+  const [lapTime, setLapTime] = useState<number>(null); // Last lap time recorded
+  const intervalRef = useRef(null); // Reference to the interval used for updating the stopwatch
+
+  // Calculate the elapsed time in seconds
+  let secondsPassed: number = 0;
+
+  // Function to format time in hours:minutes:seconds.milliseconds format
+  const formatTime = (time: number): string => {
+    const hours = Math.floor(time / 3600);
+    const minutes = Math.floor((time % 3600) / 60).toString().padStart(2, '0');
+    const seconds = Math.floor(time % 60).toString().padStart(2, '0');
+    const milliseconds = Math.floor((time % 1) * 1000).toString().padStart(3, '0');
 
-// Function to format the time. This is necessary since both the time and lap times need to be formatted
-export function formatTime(time: number): string {
-    // Format the time in mm:ss:ms. Display hours only if reached
-    const hours = Math.floor(time / 360000);
-    const minutes = Math.floor((time % 360000) / 6000);
-    const seconds = Math.floor((time % 6000) / 100);
-    const milliseconds = time % 100;
-    // Format the minutes, seconds, and milliseconds to be two digits
-    const formattedMinutes = minutes.toString().padStart(2, '0');
-    const formattedSeconds = seconds.toString().padStart(2, '0');
-    const formattedMilliseconds = milliseconds.toString().padStart(2, '0');
-    // If stopwatch reaches at least an hour, display the hours
     if (hours > 0) {
-        const formattedHours = hours.toString().padStart(2, '0');
-        return `${formattedHours}:${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`;
+      return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+    } else {
+      return `${minutes}:${seconds}.${milliseconds}`;
     }
-    // Combine the values into a string
-    const formattedTime = `${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`;
-    return formattedTime;
-}
+  };
 
-export default function StopWatch() {
-    // State to track the time, whether the timer is on/off, and the lap times
-    const [time, setTime] = useState(0);
-    const [timerOn, setTimerOn] = useState(false);
-    const [lapTimes, setLapTimes] = useState<number[]>([]);
+  // Function to handle starting the stopwatch
+  const handleStart = () => {
+    if (!isRunning) {
+      const currentTime = Date.now();
+      // Set start time and elapsed time
+      setStartTime(currentTime - elaspedTime);
+      setElaspedTime(currentTime);
+      setLapHistory([...lapHistory]);
+      setLapTime(currentTime);
+      // Start the interval for updating the elapsed time
+      clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(() => {
+        setElaspedTime(Date.now() - startTime);
+      }, 50);
+      setIsRunning(true); // Set running flag to true
+    }
+  };
 
-    // Stops the timer, resets the time, and clears the lap times. useCallback is used to prevent unnecessary re-renders
-    const handleReset = useCallback(() => {
-        setTimerOn(false); 
-        setTime(0); 
-        setLapTimes([]);
-      }, []);
+  // Function to handle stopping the stopwatch
+  const handleStop = () => {
+    clearInterval(intervalRef.current); // Clear the interval
+    setIsRunning(false); // Set running flag to false
+  };
 
-    // Every time timerOn changes, we start or stop the timer
-    // useEffect is necessary since setInterval changes the state and we don't want to create an infinite loop
-    useEffect(() => {
-        let interval: ReturnType<typeof setInterval> | null = null;
+  // Calculate the elapsed time in seconds if both start and elapsed times are set
+  if (startTime != null && elaspedTime != null) {
+    secondsPassed = (elaspedTime - startTime) / 1000;
+  }
 
-        if (timerOn) {
-            interval = setInterval(() => setTime(time => time + 1), 10)
-        }
+  // Function to handle recording a lap time
+  const handleLap = () => {
+    if (isRunning) {
+      const lapElapsedTime: number = Date.now() - lapTime;
+      setLapHistory([...lapHistory, lapElapsedTime]); // Add lap time to lap history
+      setLapTime(Date.now()); // Set the current time as the last lap time
+    }
+  };
 
-        return () => {clearInterval(interval)} // Clears the interval when the component unmounts or timerOn changes
-    }, [timerOn])
+  // Function to handle resetting the stopwatch
+  const handleReset = () => {
+    clearInterval(intervalRef.current); // Clear the interval
+    setElaspedTime(0); // Reset elapsed time
+    setStartTime(null); // Reset start time
+    setIsRunning(false); // Set running flag to false
+    setLapHistory([]); // Clear lap history
+    setLapTime(null); // Reset last lap time
+  };
 
-    return(
-        <div className='stopwatch'>
-            <h1 className='stopwatch-title'>StopWatch</h1>
-            <div className='stopwatch-content'>
-                <div className='stopwatch-buttons'>
-                    <StopWatchButton type={'start'} onClick={() => setTimerOn(true)}></StopWatchButton>
-                    <StopWatchButton type={'stop'} onClick={() => setTimerOn(false)}></StopWatchButton>
-                    <StopWatchButton type={'lap'} onClick={() => setLapTimes([...lapTimes, time])} timerOn={timerOn} lapTimes={lapTimes}></StopWatchButton>
-                    <StopWatchButton type={'reset'} onClick={handleReset} time={time}></StopWatchButton>
-                </div>
-                <div className='stopwatch-time'>
-                    <p>{formatTime(time)}</p>
-                    {/* Display the numbered lap times */}
-                    {lapTimes.length > 0 && (
-                        <div className='stopwatch-laptimes'>
-                            <p>Lap times</p>
-                            <ul>
-                                {lapTimes.map((lapTime, index) => {
-                                    return <li key={index}>{(index + 1)+'.'} {formatTime(lapTime)}</li>
-                                })}
-                            </ul>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  // Render the stopwatch component
+  return (
+    <div className="container">
+      <h1 className="Title">Stopwatch</h1>
+      <div className="stopwatch-display">{formatTime(secondsPassed)}</div>
+      <StopWatchButton
+        onStart={handleStart}
+        onStop={handleStop}
+        onLap={handleLap}
+        onReset={handleReset}
+      />
+      <ol className="lap-list">
+        <h3>Lap Time</h3>
+        {lapHistory.map((lapTime, index) => (
+          <li className="lap-item" key={index}>{formatTime((lapTime/1000))}</li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/src/StopWatchButton.test.tsx b/src/StopWatchButton.test.tsx
deleted file mode 100644
index c1f7b46d..00000000
--- a/src/StopWatchButton.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import StopWatchButton from './StopWatchButton';
-
-test('calls onClick prop when clicked', () => {
-  const handleClick = jest.fn();
-  const { getByRole } = render(<StopWatchButton type='start' onClick={handleClick} />);
-
-  fireEvent.click(getByRole('button', { name: /start/i }));
-
-  expect(handleClick).toHaveBeenCalled();
-});
-
-test('renders with correct text', () => {
-  const { getByRole } = render(<StopWatchButton type='start' onClick={() => {}} />);
-  expect(getByRole('button').textContent).toBe('Start');
-});
-
-test('calls onClick prop when clicked with type stop', () => {
-  const handleClick = jest.fn();
-  const { getByRole } = render(<StopWatchButton type='stop' onClick={handleClick} />);
-
-  fireEvent.click(getByRole('button', { name: /stop/i }));
-
-  expect(handleClick).toHaveBeenCalled();
-});
-
-test('calls onClick prop when clicked with type reset', () => {
-  const handleClick = jest.fn();
-  const { getByRole } = render(<StopWatchButton type='reset' onClick={handleClick} />);
-
-  fireEvent.click(getByRole('button', { name: /reset/i }));
-
-  expect(handleClick).toHaveBeenCalled();
-});
-
-test('renders with correct text for type reset', () => {
-  const { getByRole } = render(<StopWatchButton type='reset' onClick={() => {}} />);
-  expect(getByRole('button').textContent).toBe('Reset');
-});
-
-test('calls onClick prop when clicked with type lap', () => {
-  const handleClick = jest.fn();
-  const { getByRole } = render(<StopWatchButton type='lap' onClick={handleClick} timerOn={true} />);
-
-  fireEvent.click(getByRole('button', { name: /lap/i }));
-
-  expect(handleClick).toHaveBeenCalled();
-});
-
-test('renders with correct text for type lap', () => {
-  const { getByRole } = render(<StopWatchButton type='lap' onClick={() => {}} timerOn={true} />);
-  expect(getByRole('button').textContent).toBe('Record Lap');
-});
-
-test('does not throw error when clicked without onClick prop', () => {
-  const { getByRole } = render(<StopWatchButton type='start' />);
-
-  expect(() => fireEvent.click(getByRole('button', { name: /start/i }))).not.toThrow();
-});
-
-test('lap button is disabled when timer is not running', () => {
-  const { getByRole } = render(<StopWatchButton type='lap' onClick={() => {}} timerOn={false} />);
-  const buttonElement = getByRole('button') as HTMLButtonElement;
-  expect(buttonElement.disabled).toBe(true);
-});
\ No newline at end of file
diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx
index 7f12a5f1..86de1dca 100644
--- a/src/StopWatchButton.tsx
+++ b/src/StopWatchButton.tsx
@@ -1,54 +1,23 @@
-import React from 'react'
+import React from 'react';
 
-// Maximum number of laps that can be recorded
-const maxLaps = 25;
+// Define the Props type for the StopWatchButton component
+type Props = {
+    onStart: () => void; // Function to handle the start button click event
+    onStop: () => void; // Function to handle the stop button click event
+    onLap: () => void; // Function to handle the lap button click event
+    onReset: () => void; // Function to handle the reset button click event
+}
 
-// Define the props for the StopWatchButton component
-type StopWatchButtonProps = {
-    type: 'start' | 'stop' | 'lap' | 'reset';
-    onClick?: () => void;
-    timerOn?: boolean;
-    time?: number;
-    lapTimes?: number[];
-};
-  
-  export default function StopWatchButton({ type, onClick, timerOn, time, lapTimes }: StopWatchButtonProps) {
-    // Determine the button text based on the type and add corresponding tabIndex
-    let buttonText, tabIndex;
-    switch(type) {
-        case 'start':
-            buttonText = 'Start';
-            tabIndex = 1;
-            break;
-        case 'stop':
-            buttonText = 'Stop';
-            tabIndex = 2;
-            break;
-        case 'lap':
-            buttonText = 'Record Lap';
-            tabIndex = 3;
-            break;
-        case 'reset':
-            buttonText = 'Reset';
-            tabIndex = 4;
-            break;
-        default: 
-        buttonText = '';
-        tabIndex = 0;
-    }
-    // Determine whether the reset or lap buttons should be disabled
-    const isLapDisabled = !timerOn || (lapTimes && lapTimes.length === 25);
-    const isResetDisabled = time === 0;
-    return(
-        <button 
-            onClick={onClick} 
-            aria-label={type}
-            tabIndex={tabIndex}
-            // Disable the lap button when the timer is stopped or when the max number of lap times is reached. Disable reset button when the timer is already reset
-            disabled={(type === 'lap' && isLapDisabled) || (type === 'reset' && isResetDisabled)}
-            >
-            {/* Display the button text, otherwise display the max laps reached message when max number is reached */}
-            {lapTimes && lapTimes.length === maxLaps && timerOn && type === 'lap' ? "Maximum laps reached" : buttonText}
-        </button>
-    )
-}
\ No newline at end of file
+// Define the StopWatchButton functional component
+export default function StopWatchButton({ onStart, onStop, onLap, onReset }: Props) {
+
+    return (
+        // Render the buttons for start, stop, lap, and reset
+        <div className='buttons'>
+            <button className='button' id='start' onClick={onStart}>Start</button>
+            <button className='button' id='stop' onClick={onStop}>Stop</button> 
+            <button className='button' id='lap' onClick={onLap}>Lap</button>
+            <button className='button' id='reset' onClick={onReset}>Reset</button>
+        </div>
+    );
+}