diff --git a/sonar-project.properties b/sonar-project.properties
index 00b11ca..1783e45 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -10,7 +10,7 @@ sonar.host.url=https://sonarcloud.io
 sonar.language=js
 sonar.projectName=wiq_en3a
 
-sonar.coverage.exclusions=**/*.test.js
+sonar.coverage.exclusions=**/*.test.js, **/*.test.ts, **/*.test.tsx
 sonar.sources=webapp/src/components,users,wikidataservice,gatewayservice
 sonar.sourceEncoding=UTF-8
 sonar.exclusions=node_modules/**
diff --git a/webapp/src/components/Game/Trivia/Dice.tsx b/webapp/src/components/Game/Trivia/Dice.tsx
deleted file mode 100644
index 7a3e69d..0000000
--- a/webapp/src/components/Game/Trivia/Dice.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import ReactDice, { ReactDiceRef } from 'react-dice-complete'
-
-type props = {
-    setDiceResult: (diceResult: number) => void
-}
-
-
-export const Dice = (props:props) => {
-    
-  const reactDice = useRef<ReactDiceRef>(null)
-
-    
-    function rollDone(num: number) : void {
-        props.setDiceResult(num)
-    }
-
-
-
-  return (
-    <ReactDice
-      numDice={1}
-      ref={reactDice}
-      rollDone={rollDone}
-      defaultRoll={6}
-      faceColor='#00c896'
-      dotColor='#f2ecff'
-      
-    />
-  )
-}
\ No newline at end of file
diff --git a/webapp/src/components/Game/Trivia/categories.test.ts b/webapp/src/components/Game/Trivia/categories.test.ts
new file mode 100644
index 0000000..60a27fe
--- /dev/null
+++ b/webapp/src/components/Game/Trivia/categories.test.ts
@@ -0,0 +1,30 @@
+import { getCategoryWithNumber, getCategoryColor, getCategoryColorWithNumber } from './categories'; 
+
+describe('Test Category Functions', () => {
+  test('getCategoryWithNumber should return correct category', () => {
+    expect(getCategoryWithNumber(1)).toBe('Sports');
+    expect(getCategoryWithNumber(2)).toBe('Science');
+  });
+
+  test('getCategoryWithNumber should return undefined for non-existent number', () => {
+    expect(getCategoryWithNumber(6)).toBeUndefined();
+  });
+
+  test('getCategoryColor should return correct color', () => {
+    expect(getCategoryColor('Sports')).toBe('#1f71b3');
+    expect(getCategoryColor('Science')).toBe('#61a33a');
+  });
+
+  test('getCategoryColor should return undefined for non-existent category', () => {
+    expect(getCategoryColor('Math')).toBeUndefined();
+  });
+
+  test('getCategoryColorWithNumber should return correct color for a number', () => {
+    expect(getCategoryColorWithNumber(1)).toBe('#1f71b3');
+    expect(getCategoryColorWithNumber(2)).toBe('#61a33a');
+  });
+
+  test('getCategoryColorWithNumber should return undefined for non-existent number', () => {
+    expect(getCategoryColorWithNumber(6)).toBeUndefined();
+  });
+});
\ No newline at end of file
diff --git a/webapp/src/components/Game/Trivia/trivia_service.test.js b/webapp/src/components/Game/Trivia/trivia_service.test.js
new file mode 100644
index 0000000..f5b9136
--- /dev/null
+++ b/webapp/src/components/Game/Trivia/trivia_service.test.js
@@ -0,0 +1,42 @@
+const axios = require('axios');
+import {expect, jest, test} from '@jest/globals';
+
+import {
+    getSportQuestions,
+    getScienceQuestions,
+    getHistoryQuestions,
+    getGeographyQuestions,
+    getEntertainmentQuestions
+} from './trivia_service'; 
+
+jest.mock('axios', () => {
+    return {
+        get: () => {return {data: [{
+                "text": "What is the capital of France?",
+                "answers": ["London", "Berlin", "Paris", "Madrid"],
+                "correctAnswer": 2
+          }] }}}}) 
+
+describe('Test Question Functions', () => {
+    
+    test('getSportQuestions should return a question', async () => {
+        const question = await getSportQuestions();
+        expect(question.text).toBe("What is the capital of France?");
+    });
+    test('getSportQuestions should return a question', async () => {
+        const question = await getScienceQuestions();
+        expect(question.text).toBe("What is the capital of France?");
+    });
+    test('getSportQuestions should return a question', async () => {
+        const question = await getHistoryQuestions();
+        expect(question.text).toBe("What is the capital of France?");
+    });
+    test('getSportQuestions should return a question', async () => {
+        const question = await getGeographyQuestions();
+        expect(question.text).toBe("What is the capital of France?");
+    });
+    test('getSportQuestions should return a question', async () => {
+        const question = await getEntertainmentQuestions();
+        expect(question.text).toBe("What is the capital of France?");
+    });
+});
\ No newline at end of file
diff --git a/webapp/src/components/Game/Trivia/trivia_service.ts b/webapp/src/components/Game/Trivia/trivia_service.ts
index 1841236..4b98fc1 100644
--- a/webapp/src/components/Game/Trivia/trivia_service.ts
+++ b/webapp/src/components/Game/Trivia/trivia_service.ts
@@ -1,40 +1,37 @@
 import { Question } from "@/src/services/question-service";
+import axios from 'axios';
 
 let url = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
+
+
 const getString = (string : string) : string => {
     return "/Get" + string + "Questions";
 }
 
 export const getSportQuestions = async (): Promise<Question> => {
-    const response = await fetch(url + getString("Sport"));
-    const data = await response.json();
-    console.log(data);
-    return data[0];
+    const response = await axios.get(url + getString("Sport"));
+    return response.data[0];
   };
 
 export const getScienceQuestions = async (): Promise<Question> => {
-    const response = await fetch(url + getString("Chemistry"));
-    const data = await response.json();
-    return data[0];
+    const response = await axios.get(url + getString("Chemistry"));
+    return response.data[0];
   };
 
 export const getHistoryQuestions = async (): Promise<Question> => {
-    const response = await fetch(url + getString("History"));
-    const data = await response.json();
-    return data[0];
+    const response = await axios.get(url + getString("History"));
+    return response.data[0];
   };
 
 export const getGeographyQuestions = async (): Promise<Question> => {
-    const response = await fetch(url + getString("Geography"));
-    const data = await response.json();
-    return data[0];
+    const response = await axios.get(url + getString("Geography"));
+    return response.data[0];
   };
 
   export const getEntertainmentQuestions = async (): Promise<Question> => {
-    const response = await fetch(url + getString("Entertainment"));
-    const data = await response.json();
-    return data[0];
+    const response = await axios.get(url + getString("Entertainment"));
+    return response.data[0];
   }
     
 
diff --git a/webapp/src/components/ui/alert-dialog.tsx b/webapp/src/components/ui/alert-dialog.tsx
deleted file mode 100644
index 0aca662..0000000
--- a/webapp/src/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "../../lib/utils"
-import { buttonVariants } from "./button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
diff --git a/webapp/src/components/ui/popover.tsx b/webapp/src/components/ui/popover.tsx
deleted file mode 100644
index b2cd9a6..0000000
--- a/webapp/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "../../lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/webapp/src/stores/playing-store copy.ts b/webapp/src/stores/playing-store copy.ts
deleted file mode 100644
index e69de29..0000000