diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 472e430..51d3d71 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
-        "react-router-dom": "^7.15.0"
+        "react-router-dom": "^7.15.1"
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
diff --git a/frontend/package.json b/frontend/package.json
index ddc12dc..f27921c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-router-dom": "^7.15.0"
+    "react-router-dom": "^7.15.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
diff --git a/frontend/src/assets/timer.png b/frontend/src/assets/timer.png
new file mode 100644
index 0000000..01b2e71
Binary files /dev/null and b/frontend/src/assets/timer.png differ
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d53eb22..40dbbd1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './styles/global.css'
+import Searching from './pages/queuePages/searching' 
+import Found from './pages/queuePages/found' 
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
-        <App/>
+    <Found/>
     </BrowserRouter>
-  </React.StrictMode>,
+  </React.StrictMode>
 )
\ No newline at end of file
diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css
new file mode 100644
index 0000000..4bde8e3
--- /dev/null
+++ b/frontend/src/pages/queuePages/found.css
@@ -0,0 +1,307 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap');
+
+.page-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  min-width: 100vw;
+  color: #F8FAFC;
+
+}
+
+.searching-section {
+  width: min(90%, 1000px);
+  height: auto;
+  min-height: 900px;
+  border: 5px solid #A78BFA;
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+
+  /*for circle and timer and writing stuff to be centered, maybe adjust? */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 40px 20px;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.row-circles {
+  display: flex;
+  flex-direction: row; 
+  gap: 50px;    /*i dont know exact measurement of distance between circles, please correct if necessary*/      
+  align-items: center;
+}
+
+.row-elo {
+  display: flex;
+  flex-direction: row; 
+  gap: 275px;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.row-info {
+  display: flex;
+  flex-direction: row; 
+  gap: 140px;
+  align-items: center;
+  margin-bottom: 30px;
+  margin-top: 20px;
+}
+
+.big-row-info {
+  display: flex;
+  flex-direction: column; 
+  align-items: center;
+  margin-top: 10px;
+}
+
+.row-button {
+  display: flex;
+  flex-direction: row; 
+  gap: 100px;
+  align-items: center;
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+
+
+.purple-circle {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #A78BFA,#737373);
+  border: 10px solid #A78BFA;
+  margin: 0 auto 30px auto;
+  position: relative;
+  animation: pulse 2s infinite;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 20px;
+}
+
+.blue-circle {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #3B82F6,#737373);
+  border: 10px solid #3B82F6;
+  margin: 0 auto 30px auto;
+  position: relative;
+  animation: pulse 2s infinite;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 20px;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.timer-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.timer-icon {
+  width: 80px;
+  height: 80px;
+  background-image: url('../../assets/timer.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.timer-text {
+    font-size: 80px;
+    font-family: "Gloock", serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #0F172A;
+}
+
+.searching-text {
+    font-family: 'Baloo Bhai 2', cursive;
+    font-size: 48px;
+    color: #0F172A;
+    margin-bottom: 10px;
+    font-weight: 700;
+    font-style: bold;
+}
+
+.vs-text {
+    font-family: 'Baloo Bhai 2', cursive;
+    font-size: 64px;
+    color: #0F172A;
+    margin-bottom: 10px;
+    font-weight: 700;
+    font-style: bold;
+}
+
+.under-searching-text {
+  font-family: 'Baloo Bhai 2', cursive;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  color: #0F172A;
+  margin-bottom: 30px;
+}
+
+
+.elo-button {
+  background: #D9D9D9;
+  width: 200px;
+  height: 42px;
+  border: 1px solid #0F172A;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.elo-button-text{
+    font-family: 'Baloo Bhai 2', cursive;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #0F172A;
+  justify-content: center;
+  align-items: center;
+}
+
+.info-button {
+  background: #D9D9D9;
+  width: 907px;
+  height: 161px;
+  border: 1px solid #0F172A;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.info-button-text-grey{
+    font-family: "Baskervville", serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #64748B;
+  justify-content: center;
+  align-items: center;
+}
+
+.info-button-text-black{
+    font-family: "Baskervville", serif;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #0F172A;
+  justify-content: center;
+  align-items: center;
+}
+
+.match-details-grid {
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px 0;
+  width: 100%;
+}
+
+.grid-row {
+  display: grid;
+  grid-template-columns: 150px 0.5fr 150px 0.5fr;
+  gap: 100px;
+  margin-bottom: 15px;
+  margin-top: 15px;
+  align-items: center;
+}
+
+.grid-row:last-child {
+  margin-bottom: 0;
+}
+
+/* below is for it to work on mobile but i will clean it up when we get there*/
+@media (max-width: 600px) {
+  .grid-row {
+    grid-template-columns: 1fr;
+    gap: 5px;
+    margin-bottom: 20px;
+  }
+  
+  .grid-label {
+    margin-top: 10px;
+  }
+}
+
+.cancel-button {
+  background: #EF4444;
+  width: 323px;
+  height: 72px;
+  border: 1px solid #0F172A;
+  font-family: 'Baloo Bhai 2', cursive;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #0F172A;
+  padding: 10px 30px;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  
+}
+
+.cancel-button:hover {
+  background: rgba(180, 23, 23, 0.842);
+  transform: scale(1.1);
+}
+
+.approve-button {
+  background: #22C55E;
+  width: 323px;
+  height: 72px;
+  border: 1px solid #0F172A;
+  font-family: 'Baloo Bhai 2', cursive;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #0F172A;
+  padding: 10px 30px;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  
+}
+
+.approve-button:hover {
+  background: rgba(15, 95, 46, 0.842);
+  transform: scale(1.1);
+}
+
+
diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx
new file mode 100644
index 0000000..da9fa9d
--- /dev/null
+++ b/frontend/src/pages/queuePages/found.tsx
@@ -0,0 +1,56 @@
+import './found.css';
+
+const Found = () => {
+  return (
+    <div className="page-container">
+      <div className="searching-section">
+        <div className="searching-text">Opponent Found!</div>
+        <div className="row-circles">
+       <div className="purple-circle">
+        <div className="searching-text">User 1</div>
+       </div>
+       <div className="vs-text">vs</div>
+       <div className="blue-circle">
+        <div className="searching-text">User 2</div>
+       </div>
+       </div>
+
+       <div className="row-elo">
+        <div className="elo-button">
+          <div className="elo-button-text">570 ELO</div>
+        </div>
+        <div className="elo-button">
+          <div className="elo-button-text">500 ELO</div>
+        </div>
+       </div>
+
+        <div className="info-button">
+          <div className="match-details-grid">
+          <div className="grid-row">
+            <div className="info-button-text-grey">Match Type</div>
+            <div className="info-button-text-black">Ranked</div>
+            <div className="info-button-text-grey">Time Limit</div>
+            <div className="info-button-text-black">15 minutes</div>
+          </div>
+          <div className="grid-row">
+            <div className="info-button-text-grey">Difficulty</div>
+            <div className="info-button-text-black">Medium</div>
+            <div className="info-button-text-grey">Number of Questions</div>
+            <div className="info-button-text-black">5</div>
+          </div>
+        </div>
+          
+        </div>
+
+        <div className="row-button">
+          <button className="cancel-button">Decline Match</button>
+          <button className="approve-button">Accept Match</button>
+          </div>
+
+
+      </div>
+    </div>
+  );
+};
+
+export default Found;
\ No newline at end of file
diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css
new file mode 100644
index 0000000..d8cb864
--- /dev/null
+++ b/frontend/src/pages/queuePages/searching.css
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
+
+.page-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  min-width: 100vw;
+  color: #F8FAFC;
+
+}
+
+.searching-section {
+  width: min(90%, 900px);
+  height: auto;
+  min-height: 600px;
+  border: 5px solid #A78BFA;
+  border-radius: 30px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+
+  /*for circle and timer and writing stuff to be centered, maybe adjust? */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 40px 20px;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+
+.purple-circle {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #A78BFA,#737373);
+  border: 10px solid #A78BFA;
+  margin: 0 auto 30px auto;
+  position: relative;
+  animation: pulse 2s infinite;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 40px 20px;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.timer-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 30px;
+}
+
+.timer-icon {
+  width: 80px;
+  height: 80px;
+  background-image: url('../../assets/timer.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.timer-text {
+    font-size: 80px;
+    font-family: "Gloock", serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #0F172A;
+}
+
+.searching-text {
+    font-family: 'Baloo Bhai 2', cursive;
+    font-size: 48px;
+    color: #0F172A;
+    margin-bottom: 10px;
+    font-weight: 700;
+    font-style: bold;
+}
+
+.under-searching-text {
+  font-family: 'Baloo Bhai 2', cursive;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  color: #0F172A;
+  margin-bottom: 30px;
+}
+
+.cancel-button {
+  background: #EF4444;
+  width: 323px;
+  height: 69px;
+  border: 1px solid #0F172A;
+  font-family: 'Baloo Bhai 2', cursive;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400; 
+  color: #0F172A;
+  padding: 10px 30px;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  
+}
+
+.cancel-button:hover {
+  background: rgba(180, 23, 23, 0.842);
+  transform: scale(1.1);
+}
+
+
diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx
new file mode 100644
index 0000000..fec8925
--- /dev/null
+++ b/frontend/src/pages/queuePages/searching.tsx
@@ -0,0 +1,31 @@
+import './searching.css';
+
+
+
+//create in searching page, when found immediately go to found, that is what can be in interface for searching
+
+
+const Searching = () => {
+  return (
+    <div className="page-container">
+      <div className="searching-section">
+       <div className="purple-circle">
+        <div className="searching-text">User 1</div>
+       </div>
+
+       <div className="timer-section">
+          <div className="timer-icon"></div>
+          <span className="timer-text">0:00</span>
+        </div>
+
+         <div className="searching-text">Searching for Opponent...</div>
+        <div className="under-searching-text">Finding a player with similar Elo</div>
+
+        <button className="cancel-button">Cancel Queue</button>
+
+      </div>
+    </div>
+  );
+};
+
+export default Searching;
\ No newline at end of file