diff --git a/tests/quiz.spec.ts b/tests/quiz.spec.ts
new file mode 100644
index 00000000..833d8a02
--- /dev/null
+++ b/tests/quiz.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test';
+
+
+
+test('Check category change', async ({ page }) => {
+    await page.goto('localhost:3000');
+    // dropdown
+    await page.click('div[name="category"]');
+
+    // Click on the category
+    await page.click('div.item:has-text("Entertainment: Books")');
+  
+    // selection to update
+    await page.waitForTimeout(1000); 
+  
+    // Check that the selected category has changed
+    const selectedCategory = await page.$eval('div[name="category"] .text', element => element.textContent.trim());
+    expect(selectedCategory).toBe("Entertainment: Books");
+  });
+  
+
+test('check question, click answer, click next button, and verify question number changes', async ({ page }) => {
+  await page.goto('localhost:3000');
+
+  // timeout for waiting for the button to be clickable
+  await page.waitForSelector('button.ui.big.icon.primary.left.labeled.button', { state: 'visible', timeout: 60000 });
+
+  await page.click('button.ui.big.icon.primary.left.labeled.button');
+
+  const questionDiv = page.locator('div.ui.huge.floating.message');
+
+  await questionDiv.waitFor({ state: 'visible', timeout: 60000 });
+
+  // Retrieve the text content of the div
+  const textContent = await questionDiv.textContent();
+
+  // Check that the text starts with 'Q.'
+  expect(textContent).toMatch(/^Q\./);
+
+  // Select the div containing the answers
+  const answersDiv = page.locator('div.ui.massive.fluid.vertical.menu');
+
+  await answersDiv.waitFor({ state: 'visible', timeout: 60000 });
+
+  // Retrieve all answer items
+  const answerItems = answersDiv.locator('a.item');
+
+  // Check that there are either 2 or 4 answers
+  const answerCount = await answerItems.count();
+  expect([2, 4]).toContain(answerCount);
+
+  // Click on the first answer
+  await answerItems.first().click();
+
+  // Get the initial question number
+  const initialQuestionNumber = await page.getByText('Question No.1 of 5000200Q.');
+
+  // next button
+  await page.click('button.ui.big.icon.primary.right.floated.right.labeled.button');
+
+  // Wait for the question number to change
+  await page.waitForTimeout(1000);
+
+  // question number
+  const newQuestionNumber = await page.getByText('Question No.2 of 5000159Q. In');
+
+  // Ensure that the question number has changed
+  expect(newQuestionNumber).not.toBe(initialQuestionNumber);
+});
\ No newline at end of file
diff --git a/tests/ui.spec.ts b/tests/ui.spec.ts
new file mode 100644
index 00000000..a9c4fcc5
--- /dev/null
+++ b/tests/ui.spec.ts
@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+    await page.goto('localhost:3000');
+  
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/QuizApp - The Ultimate Trivia Quiz/);
+  });
+
+  test('Page header text exist', async ({ page }) => {
+    await page.goto('localhost:3000');
+  
+    let targetText = "QuizApp";
+    let FormText = "The Ultimate Trivia Quiz";
+
+    let pageHeader = page.getByText(targetText);
+    let pageForm = page.getByText(FormText);
+    
+    await expect(pageHeader).toBeTruthy();
+    await expect(pageForm).toBeTruthy();
+  });
+
+
+  test('Test init form consist general questions', async ({ page }) => {
+    await page.goto('localhost:3000');
+  
+    let text1 = "In which category do you want to play the quiz?";
+    let text2 = "The How many questions do you want in your quiz? Trivia Quiz";
+    let text3 = "How difficult do you want your quiz to be?";
+    let text4 = "Which type of questions do you want in your quiz?";
+    let text5 = "Please select the countdown time for your quiz.";
+    let StartButton = "Play Now";
+
+    let checkQuestion1 = page.getByText(text1);
+    let checkQuestion2 = page.getByText(text2);
+    let checkQuestion3 = page.getByText(text3);
+    let checkQuestion4 = page.getByText(text4);
+    let checkQuestion5 = page.getByText(text5);
+    let checkButton = page.getByText(StartButton);
+    
+    await expect(checkQuestion1).toBeTruthy();
+    await expect(checkQuestion2).toBeTruthy();
+    await expect(checkQuestion3).toBeTruthy();
+    await expect(checkQuestion4).toBeTruthy();
+    await expect(checkQuestion5).toBeTruthy();
+    await expect(checkButton).toBeTruthy();
+  });
+
+
+  test('Check if selected text changes when different category is clicked', async ({ page }) => {
+    // Navigate to your quiz page
+    await page.goto('localhost:3000');
+  
+    // Click on the dropdown to open it
+    await page.click('div[name="category"]');
+  
+    // Wait for the dropdown menu to appear
+    await page.waitForSelector('.menu.transition');
+  
+    // Click on a specific category option (e.g., "Science & Nature")
+    await page.click('div.item:has-text("Science & Nature")');
+
+    // Wait for the selected text to update
+    await page.waitForSelector('.text', { text: 'Science & Nature' });
+  
+    // Get the updated selected text
+    let selectedText = await page.textContent('.text');
+  
+    // Check if the selected text matches the expected text
+    expect(selectedText).toBe('Science & Nature');
+  
+    // Click on a different category option (e.g., "History")
+    await page.click('div.item:has-text("History")');
+  
+    // Wait for the selected text to update
+    await page.waitForSelector('.text', { text: 'History' });
+  
+    // Get the updated selected text
+    selectedText = await page.textContent('.text');
+  
+    // Check if the selected text matches the expected text
+    expect(selectedText).toBe('History');
+  });
+  
\ No newline at end of file