diff --git a/pages/_app.js b/pages/_app.js
index 2300201..b97e52f 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,5 @@
-import '@/styles/globals.css'
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/pages/index.js b/pages/index.js
index c982cd5..57372fb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,83 +1,65 @@
-async function get_stats(){
-
-  try{
-  const inputfieldname = document.getElementById("username")
-  const username = inputfieldname.value
-
-  const player_details_url = `https://api.chess.com/pub/player/${username}`
-  const player_details_response = await fetch(player_details_url)
-
-  const player_details = await player_details_response.json(); 
-
-
-  document.querySelector("#avatar_image").src = player_details.avatar
-  document.querySelector("#avatar_name").innerHTML = player_details.name
-
-
-  const player_stats_url = `https://api.chess.com/pub/player/${username}/stats`
-  const player_stats_response = await fetch(player_stats_url)
-
-  const player_stats = await player_stats_response.json(); 
-
-  const rapid_best_stats = player_stats.chess_rapid.best
-  const blitz_best_stats = player_stats.chess_blitz.best
-  const bullet_best_stats = player_stats.chess_bullet.best
-  const daily_best_stats = player_stats.chess_daily.best
-
-
-  let dictionary = {
-    photo : player_details.avatar,
-    name : player_details.name,
-    username: player_details.username,
-    location: player_details.location,
-    league : player_details.league,
-    rapid_best : rapid_best_stats["rating"],
-    blitz_best : blitz_best_stats["rating"],
-    bullet_best: bullet_best_stats["rating"],
-    daily_best:daily_best_stats["rating"]
-  }
-
-  document.querySelector("#avatar_image").src = dictionary.photo
-  document.querySelector("#avatar_name").innerHTML = "Name :" + dictionary.name
-  document.querySelector("#avatar_username").innerHTML = "Username :" +dictionary.username
-  document.querySelector("#avatar_league").innerHTML = "League :" + dictionary.league
-  document.querySelector("#avatar_rapid").innerHTML = "Best score in Rapid :"  + dictionary.rapid_best
-  document.querySelector("#avatar_bullet").innerHTML = "Best score in Bullet :" +dictionary.bullet_best
-  document.querySelector("#avatar_blitz").innerHTML = "Best score in Blitz :" + dictionary.blitz_best
-  document.querySelector("#avatar_daily").innerHTML = "Best score in Daily :" + dictionary.daily_best
-  document.querySelector("#avatar_location").innerHTML = "Location :" + dictionary.location
-
-
-  console.log(dictionary)
-
-  }catch{
-    console.log("runtime error")
-  }
-
-}
-
-function Chess(){
+import { useState } from "react";
+
+function Chess() {
+  const [userName, setUserName] = useState("");
+  const [playerDetails, setPlayerDetails] = useState();
+  const [playerStats, setPlayerStats] = useState();
+
+  const get_stats = async () => {
+    try {
+      const player_details_url = `https://api.chess.com/pub/player/${userName}`;
+      const player_details_response = await fetch(player_details_url);
+      const player_details = await player_details_response.json();
+
+      const player_stats_url = `https://api.chess.com/pub/player/${userName}/stats`;
+      const player_stats_response = await fetch(player_stats_url);
+      const player_stats = await player_stats_response.json();
+
+      setPlayerDetails(player_details);
+      setPlayerStats(player_stats);
+    } catch (error) {
+      console.log(error);
+      alert(error.message);
+    }
+  };
 
   return (
-      <div>
-          <label>Name</label>
-          <input type="text" name="name" id="username" onChange={get_stats}/> <br></br>
-
-          <img src="" id="avatar_image"></img>  <br></br>
-          <p1 id="avatar_name"></p1> <br></br>
-          <p1 id="avatar_username"></p1> <br></br>
-          <p1 id="avatar_location"></p1> <br></br>
-          <p1 id="avatar_league"></p1> <br></br>
-          <p1 id="avatar_rapid"></p1> <br></br>
-          <p1 id="avatar_blitz"></p1> <br></br>
-          <p1 id="avatar_bullet"></p1> <br></br>
-          <p1 id="avatar_daily"></p1> <br></br>
-
-
-          
-
-      </div>
-  )
+    <div className="center">
+      <label>Name</label>
+      <input
+        type="text"
+        name="name"
+        id="username"
+        value={userName}
+        onChange={(e) => {
+          setUserName(e.target.value);
+        }}
+      />
+      <button onClick={get_stats}>Get Stats</button>
+      <br></br>
+      {playerDetails && playerStats ? (
+        <>
+          <img src={playerDetails.avatar}></img>
+          <p id="avatar_name">Name : {playerDetails.name}</p>
+          <p id="avatar_username">Username : {playerDetails.username}</p>
+          <p id="avatar_location">Location : {playerDetails.location}</p>
+          <p id="avatar_league">League: {playerDetails.league}</p>
+          <p id="avatar_rapid">
+            Best score in Rapid : {playerStats.chess_rapid.best.rating}
+          </p>
+          <p id="avatar_blitz">
+            Best score in Blitz : {playerStats.chess_blitz.best.rating}
+          </p>
+          <p id="avatar_bullet">
+            Best score in Bullet : {playerStats.chess_bullet.best.rating}
+          </p>
+          <p id="avatar_daily">
+            Best score in Daily: {playerStats.chess_daily.best.rating}
+          </p>
+        </>
+      ) : null}
+    </div>
+  );
 }
 
-export default Chess
\ No newline at end of file
+export default Chess;
diff --git a/styles/globals.css b/styles/globals.css
index d4f491e..672c642 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,107 +1,14 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
+.center {
+  /* border: 1px solid; */
+  margin: auto;
+  width: 50%;
+  padding: 2px;
+}
+
+@media screen and (max-width: 800px) {
+  .center {
+    width: 100%;
+    border: None;
+    padding: 1px; /* The width is 100%, when the viewport is 800px or smaller */
   }
 }