diff --git a/frontend/word-guessing-game/public/index.html b/frontend/word-guessing-game/public/index.html
index 12871b3..5fd94fe 100644
--- a/frontend/word-guessing-game/public/index.html
+++ b/frontend/word-guessing-game/public/index.html
@@ -14,7 +14,7 @@
     <title>Ekreb</title>
     <style>
       body {
-        background-image: url('library.jpg'); /* Replace 'your-image.jpg' with the path to your background image */
+        background-image: url('lib1.jpg'); /* Replace 'your-image.jpg' with the path to your background image */
         background-repeat: no-repeat;
         background-size: cover; /* Adjust this property for image size */
         background-attachment: fixed; /* This keeps the background fixed while scrolling */
diff --git a/frontend/word-guessing-game/public/lib1.jpg b/frontend/word-guessing-game/public/lib1.jpg
new file mode 100644
index 0000000..e5a80a1
Binary files /dev/null and b/frontend/word-guessing-game/public/lib1.jpg differ
diff --git a/frontend/word-guessing-game/src/GamePage/GamePage.css b/frontend/word-guessing-game/src/GamePage/GamePage.css
index bce54a4..472abb2 100644
--- a/frontend/word-guessing-game/src/GamePage/GamePage.css
+++ b/frontend/word-guessing-game/src/GamePage/GamePage.css
@@ -1,154 +1,207 @@
-/* Add this style to your GamePage.css file */
-.reset-button {
-  background-color: #ff5722; /* Change the background color as desired */
-  color: #fff; /* Text color */
-  padding: 10px 20px;
-  font-size: 16px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+/* GamePage.css */
 
-  /* Add box shadow for a cool effect */
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-}
-
-.reset-button:hover {
-  background-color: #d84315; /* Change the hover background color as desired */
-}
-
-.reset-button {
-  margin-left: 16px; /* Add your desired margin value */
+.card-container {
+  display: flex; /* Use flex display to place them side by side */
+  justify-content: space-between; /* Add space between the cards */
+  margin-top: 20px;
 }
 
-
-.button{
-  background-color: #007bff; /* Blue background color */
-  color: #fff; 
-  padding: 10px 20px; 
-  border: none; 
-  border-radius: 5px;
-  cursor: pointer; /* Show pointer cursor on hover */
-  font-size: 16px; /* Font size */
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow */
-  transition: box-shadow 0.3s ease; /* Add a transition for smoother hover effect */}
-
-.button:hover{
-  background-color: #0056b3; /* Darker blue on hover */
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
+/* Add styles for the header */
+/* Styles for the app header container */
+.app-header {
+  background-color: rgb(132, 164, 170) ; /* Background color for the header */
+  color: #fff; /* Text color */
+  padding: 10px; /* Add padding for spacing */
+  text-align: center; /* Center-align the text */
+  border-radius: 10px;
+  margin-bottom: 10px;
 }
 
-.button.hide{
-  background-color: rgb(110, 174, 252); /* Red background color */
+/* Style for the game name */
+.game-name {
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 36px; /* Adjust font size for the game name */
+  font-weight: bold; /* Make the name bold if needed */
 }
 
 
-.green {
-  color: green;
-}
-
-.red {
-  color: red;
+/* Style for the game name */
+.game-name {
+  font-size: 36px; /* Adjust font size for the game name */
+  font-weight: bold; /* Make the name bold if needed */
 }
 
 
 /* Container styles */
 .game-container {
-  max-width: 600px;
-  margin: 0 auto;
+  font-family: 'Arial', sans-serif;
+  background-color: #f5f5f5;
   padding: 20px;
   text-align: center;
-  background-color: #f4f4f4; /* Light gray background */
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 /* Header styles */
 .game-header h1 {
-  font-size: 28px;
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  color: #3498db; /* Blue text color */
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 20px;
 }
 
-/* Content styles */
-.game-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-/* Game card styles */
+/* Card styles */
 .game-card {
-  background-color: #fff; /* White background */
+  background-color: #fff;
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
-  flex: 1;
-  text-align: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-/* Game title styles */
 .game-title {
-  font-size: 24px;
-  margin-bottom: 10px;
-  color: #333; /* Dark gray text color */
+  font-size: 1.5rem;
+  color: #333;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+  margin-bottom: 15px;
 }
 
-/* Scrambled word styles */
 .scrambled-word {
-  font-size: 18px;
-  margin-bottom: 10px;
-  font-weight: bold;
-  color: #333; /* Dark gray text color */
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1.2rem;
+  color: #333;
+  margin-bottom: 20px;
 }
 
-/* Guess input styles */
 .guess-input {
   width: 100%;
   padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc; /* Light gray border */
+  font-size: 1rem;
+  border: 1px solid #ccc;
   border-radius: 5px;
-  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.button {
+  padding: 12px 24px; /* Slightly increase padding for better touch targets */
+  font-size: 1rem;
+  border: none;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  border-radius: 8px; /* Increase border-radius for a softer look */
+  cursor: pointer;
+  background-color: #f39c12;
+  color: #fff;
+  transition: background-color 0.3s ease, color 0.3s ease; /* Add a smooth transition effect */
+}
+
+.button:hover{
+  background-color: #b37511;
+  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
 }
 
-/* Score card styles */
+
+.button.hint-button {
+  background-color: #f39c12; /* Use a yellow color for hint buttons */
+  color: #fff;
+}
+
+.button.hint-button:hover {
+  background-color: #d68910; /* Darken the color on hover */
+  
+}
+
+.button.primary {
+  background-color: #3498db; /* Use a blue color for primary buttons */
+  color: #fff;
+}
+
+
+.button.primary:hover {
+  background-color: #2980b9; /* Darken the color on hover */
+}
+
+.button.secondary {
+  background-color: #6c757d;
+  color: #fff;
+}
+
+.button.secondary:hover {
+  background-color: #545b62;
+}
+
+
+/* Hint message styles */
+.hint-message {
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1rem;
+  color: #333;
+  margin-top: 15px;
+}
+
+/* Round number styles */
+.round-number {
+  font-size: 1rem;
+  color: #333;
+  margin-top: 15px;
+}
+
+
+/* Accuracy and Score card styles */
+/* ... previous styles ... */
+
+/* Accuracy and Score card styles */
+.accuracy-card,
 .score-card {
-  background-color: #fff; /* White background */
-  padding: 20px;
+  background-color: #fff;
+  padding: 10px; /* Reduce padding for smaller boxes */
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
-  text-align: center;
-  margin-top: 25px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  flex: 1; /* Allow the cards to share equal width within the container */
+  margin: 0 10px; /* Add margin between the cards */
 }
+.score-card{
+  margin-top: 20px;
+}
+
+
 
-/* Score title styles */
+.accuracy-title,
 .score-title {
-  font-size: 24px;
-  margin-bottom: 10px;
-  color: #333; /* Dark gray text color */
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 1rem; /* Reduce font size for both titles */
+  color: #333;
 }
 
-/* Score value styles */
+.accuracy,
 .score {
-  font-size: 32px;
-  font-weight: bold;
-  color: #3498db; /* Blue text color */
+  font-size: 1.2rem; /* Reduce font size for both accuracy and score */
+  color: #333;
 }
 
 /* Feedback message styles */
 .feedback-message {
-  font-size: 18px;
-  color: #e74c3c; /* Red for incorrect feedback */
-  margin-top: 10px;
+  font-size: 1rem;
+  margin-top: 20px;
 }
 
-.app {
-  text-align: center;
+/* Button styles */
+.button.reset-button {
+  margin-top: 30px;
+  background-color: #dc3545;
+  color: #fff;
 }
 
-.App{
-  text-align: center;
-}
\ No newline at end of file
+.button.reset-button:hover {
+  background-color: #ab1221;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .game-card {
+    padding: 15px;
+  }
+
+  .accuracy-card,
+  .score-card {
+    padding: 15px;
+  }
+}
diff --git a/frontend/word-guessing-game/src/GamePage/GamePage.js b/frontend/word-guessing-game/src/GamePage/GamePage.js
index 0f024d9..d154493 100644
--- a/frontend/word-guessing-game/src/GamePage/GamePage.js
+++ b/frontend/word-guessing-game/src/GamePage/GamePage.js
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import './GamePage.css';
 import Rules from './Rules';
+import WelcomePage from './WelcomePage';
+
 
 function GamePage() {
   const [word, setWord] = useState('');
@@ -13,7 +15,8 @@ function GamePage() {
   const [showRules, setShowRules] = useState(false);
   const [hint, setHint] = useState('');
   const [round, setRound] = useState(1);
-  
+
+  const [gameStarted, setGameStarted] = useState(false);
 
   // Define feedbackClass based on the content of the feedback message
   const feedbackClass = feedback.includes('Correct') ? 'green' : 'red';
@@ -66,6 +69,10 @@ function GamePage() {
     fetchRandomWord();
   }, []);
 
+  const onStartGame = () => {
+    setGameStarted(true);
+  };
+
   const toggleRules = () => {
     setShowRules(!showRules);
   };
@@ -113,51 +120,56 @@ function GamePage() {
   };
   
   return (
+    <div> 
+      <div className="app-header">
+        <h1 className="game-name">Ekreb</h1>
+      </div>
 <div className="game-container">
-  <Rules showRules={showRules} toggleRules={toggleRules} />
-      <header className="game-header">
-        <h1>Ekreb</h1>
-      </header>
+      <Rules showRules={showRules} toggleRules={toggleRules} />
       <div className="game-content">
         <div className="game-card">
-          <h2 className="game-title">Guess the Word:</h2>
-          <p className="scrambled-word">Scrambled Word: {word}</p>
-          <input
-            type="text"
-            className="guess-input"
-            placeholder="Your Guess"
-            value={guess}
-            onChange={(e) => setGuess(e.target.value)}
-          />
-          <button className="button" onClick={handleSubmitGuess}>
-            Submit Guess
-          </button>
-          <button className="button hint-button" onClick={handleHint} style={{ marginLeft: '10px' }}>
-          Get Hint
-        </button>
-        {<p className="hint-message">Hint: {hint}</p>}
-        <p className="round-number">Round: {round}</p>
-        </div>
-        <div className="accuracy-card">
-          <h2 className="accuracy-title">Accuracy:</h2>
-          <p className="accuracy">{accuracy}%</p>
-       </div>
-        <div className="score-card">
-          <h2 className="score-title">Score:</h2>
-          <p className="score">{score}</p>
-        </div>
+          <div className="word-container">
+            <h2 className="game-title">Guess the Word:</h2>
+            <p className="scrambled-word">Scrambled Word: {word}</p>
+            <input
+              type="text"
+              className="guess-input"
+              placeholder="Your Guess"
+              value={guess}
+              onChange={(e) => setGuess(e.target.value)}
+            />
+            <button className="button" onClick={handleSubmitGuess}>
+              Submit Guess
+            </button>
+            <button className="button hint-button" onClick={handleHint} style={{ marginLeft: '10px' }}>
+              Get Hint
+            </button>
+            {<p className="hint-message">Hint: {hint}</p>}
+          </div>
+<div className="card-container">
+  <div className="accuracy-card">
+    <h2 className="accuracy-title">Accuracy:</h2>
+    <p className="accuracy">{accuracy}%</p>
+  </div>
+  <div className="score-card">
+    <h2 className="score-title">Score:</h2>
+    <p className="score">{score}</p>
+  </div>
+</div>
+        </div>        
       </div>
       <p className="feedback-message" style={{ color: feedbackClass }}>
         {feedback}
       </p>
       <button className="button" onClick={handleSkip}>
-         Skip Word
+       Skip Word
       </button>
-      <button className="button reset-button" onClick={handleReset}>
-        Reset Game
+      <button className="button reset-button" onClick={handleReset} style={{ marginLeft: '10px' }}>
+      Reset Game
       </button>
+
+    </div>
     </div>
-  );  
-}
+  )};
 
 export default GamePage;
diff --git a/frontend/word-guessing-game/src/GamePage/Rules.css b/frontend/word-guessing-game/src/GamePage/Rules.css
index 6d396ac..c782319 100644
--- a/frontend/word-guessing-game/src/GamePage/Rules.css
+++ b/frontend/word-guessing-game/src/GamePage/Rules.css
@@ -1,41 +1,45 @@
-.rules1{
-  background-color: #007bff; /* Blue background color */
-  color: #fff; 
-  padding: 10px 20px; 
-  border: none; 
+/* Rules button styles */
+.rules1 {
+  background-color: #3498db; /* Blue background color */
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
   border-radius: 5px;
-  cursor: pointer; /* Show pointer cursor on hover */
-  font-size: 16px; /* Font size */
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow */
-  transition: box-shadow 0.3s ease; /* Add a transition for smoother hover effect */
+  cursor: pointer;
+  font-size: 16px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.3s ease, background-color 0.3s ease; /* Add a transition for smoother hover effect */
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 
-.rules1:hover{
-  background-color: #0056b3; /* Darker blue on hover */
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */}
+.rules1:hover {
+  background-color: #2980b9; /* Darken the blue on hover */
+  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
+}
 
-.rules1.hide{
-    background-color: rgb(110, 174, 252); /* Red background color */
-  }
+.rules1.hide {
+  background-color: #dc3545; /* Red background color */
+}
 
+/* Rules container styles */
 .rules-container {
-    background-color: #ffffff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .rules-title {
-    font-size: 24px;
-    margin-bottom: 10px;
-  }
-  
-  .rules-list {
-    list-style-type: disc;
-    padding-left: 20px;
-  }
-  
-  .rules-list li {
-    font-size: 16px;
-    margin-bottom: 10px;
-  }  
\ No newline at end of file
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.rules-title {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.rules-list {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+.rules-list li {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
diff --git a/frontend/word-guessing-game/src/GamePage/WelcomePage.css b/frontend/word-guessing-game/src/GamePage/WelcomePage.css
new file mode 100644
index 0000000..5b2c938
--- /dev/null
+++ b/frontend/word-guessing-game/src/GamePage/WelcomePage.css
@@ -0,0 +1,71 @@
+/* WelcomeScreen.css */
+
+.welcome-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
+    z-index: 1000; /* Ensure the welcome screen is on top */
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none; /* Initially not clickable */
+  }
+  
+  .welcome-screen.show {
+    opacity: 1; /* Fade in when shown */
+    pointer-events: auto; /* Allow interaction */
+  }
+  
+  .welcome-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
+  }
+  
+  .welcome-content h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .welcome-content h2 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #555;
+  }
+  
+  .welcome-content ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    text-align: left;
+    margin-bottom: 20px;
+  }
+  
+  .welcome-content li {
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: #777;
+  }
+  
+  .play-button {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .play-button:hover {
+    background-color: #0056b3;
+  }
+  
\ No newline at end of file
diff --git a/frontend/word-guessing-game/src/GamePage/WelcomePage.js b/frontend/word-guessing-game/src/GamePage/WelcomePage.js
new file mode 100644
index 0000000..b7bfc9e
--- /dev/null
+++ b/frontend/word-guessing-game/src/GamePage/WelcomePage.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import './WelcomePage.css'; // You can create a CSS file for styling the welcome screen
+
+function WelcomeScreen({ onStartGame }) {
+  const [showWelcomeScreen, setShowWelcomeScreen] = useState(true);
+
+  const handlePlayClick = () => {
+    setShowWelcomeScreen(false);
+    onStartGame(); // Callback to start the game
+  };
+
+  return (
+    <div className={`welcome-screen ${showWelcomeScreen ? 'show' : 'hide'}`}>
+      <div className="welcome-content">
+        <h1>Welcome to Ekreb</h1>
+        <h2>Rules:</h2>
+        <ul>
+          <li>Rule 1: Explain the first rule here.</li>
+          <li>Rule 2: Explain the second rule here.</li>
+          {/* Add more rules as needed */}
+        </ul>
+        <button className="play-button" onClick={handlePlayClick}>
+          Play
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default WelcomeScreen;