diff --git a/frontend/src/components/Button/Button.test.jsx b/frontend/src/components/Button/Button.test.jsx
deleted file mode 100644
index ec40ca6e5..000000000
--- a/frontend/src/components/Button/Button.test.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import Button from './Button';
-import { vi } from 'vitest';
-
-describe('Button component', () => {
-
-    it('renders correctly', () => {
-        render(<Button title="Test Button" />);
-        const buttonElement = screen.getByText('Test Button');
-        expect(document.body.contains(buttonElement)).to.be.true;
-    });
-
-    test('calls onClick handler only once', () => {
-        const mockOnClick = vi.fn();
-        render(<Button title="Test Button" onClick={mockOnClick} />);
-
-        const button = screen.getByText('Test Button');
-        fireEvent.click(button);
-        fireEvent.click(button); // second click
-
-        expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-
-    test('does not call onClick when disabled is true', () => {
-        const mockOnClick = vi.fn();
-        render(<Button title="Test Button" onClick={mockOnClick} disabled={true} />);
-
-        const button = screen.getByText('Test Button');
-        fireEvent.click(button);
-
-        expect(mockOnClick).not.toHaveBeenCalled();
-    });
-
-    test('applies custom class and style', () => {
-        const style = { backgroundColor: 'blue' };
-        render(<Button title="Test Button" className="custom-class" style={style} />);
-
-        const button = screen.getByText('Test Button');
-        expect(button.classList.contains('custom-class')).to.be.true;
-        expect(button.style.backgroundColor).toBe('blue');
-    });
-
-});
diff --git a/frontend/src/components/Button/Button.test.tsx b/frontend/src/components/Button/Button.test.tsx
new file mode 100644
index 000000000..5d4747276
--- /dev/null
+++ b/frontend/src/components/Button/Button.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import Button from './Button';
+import { describe, expect, it, vi } from 'vitest';
+
+describe('Button component', () => {
+
+    it('renders correctly', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} />);
+        const buttonElement = getByText('Test Button');
+
+        expect(document.body.contains(buttonElement)).toBe(true);
+    });
+
+    it('calls onClick handler only once', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} />);
+
+        const button = getByText('Test Button');
+        fireEvent.click(button);
+        fireEvent.click(button); // second click
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when disabled is true', () => {
+        const mockOnClick = vi.fn();
+        const { getByText } = render(<Button title="Test Button" onClick={mockOnClick} disabled={true} />);
+
+        const button = getByText('Test Button');
+        fireEvent.click(button);
+
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+
+    it('applies custom class and style', () => {
+        const mockOnClick = vi.fn();
+        const style = { backgroundColor: 'blue' };
+        const { getByText } = render(<Button title="Test Button" className="custom-class" style={style} onClick={mockOnClick} />);
+
+        const button = getByText('Test Button');
+        
+        expect(button.classList.contains('custom-class')).toBe(true);
+        expect(button.style.backgroundColor).toBe('blue');
+    });
+
+});
diff --git a/frontend/src/components/Button/Button.jsx b/frontend/src/components/Button/Button.tsx
similarity index 77%
rename from frontend/src/components/Button/Button.jsx
rename to frontend/src/components/Button/Button.tsx
index 46ea0378d..6ddfc7f85 100644
--- a/frontend/src/components/Button/Button.jsx
+++ b/frontend/src/components/Button/Button.tsx
@@ -2,6 +2,16 @@ import React, { useRef } from "react";
 import classNames from "classnames";
 import { audioInitialized } from "../../util/audio";
 
+interface ButtonProps {
+    title: string;
+    onClick: (value: string) => void;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    value?: string;
+}
+
 // Button is a button that can only be clicked one time
 const Button = ({
     title,
@@ -11,7 +21,7 @@ const Button = ({
     style = {},
     disabled = false,
     value = "",
-}) => {
+}: ButtonProps) => {
     const clicked = useRef(false);
 
     // Only handle the first click
@@ -28,12 +38,12 @@ const Button = ({
     // Without the browser having registered any user interaction (e.g. click)
     const touchEvent = audioInitialized
         ? {
-              onTouchStart: (e) => {
-                  e.stopPropagation();
-                  clickOnce();
-                  return false;
-              },
-          }
+            onTouchStart: (e) => {
+                e.stopPropagation();
+                clickOnce();
+                return false;
+            },
+        }
         : {};
 
     return (
diff --git a/frontend/src/util/audio.js b/frontend/src/util/audio.ts
similarity index 100%
rename from frontend/src/util/audio.js
rename to frontend/src/util/audio.ts