diff --git a/src/App.tsx b/src/App.tsx
index 3761920..02d98cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -146,11 +146,7 @@ function App() {
         <div className="m-0 flex w-full flex-col p-[20px] pt-2 text-[24px] text-[#2f2f2f]">
           <div className="flex flex-col pb-8">
             <div className="flex w-full items-center justify-center">
-              <img
-                src="./public/Overwatch_circle_logo.svg"
-                alt="Overwatch"
-                width={24}
-              />
+              <img src="Overwatch_circle_logo.svg" alt="Overwatch" width={24} />
             </div>
             <ControlScore
               win={win}
diff --git a/src/Components/ControlRate/ControlRate.tsx b/src/Components/ControlRate/ControlRate.tsx
index b6ef76d..40a7d1d 100644
--- a/src/Components/ControlRate/ControlRate.tsx
+++ b/src/Components/ControlRate/ControlRate.tsx
@@ -20,7 +20,7 @@ export const ControlRate = ({
             />
             <label htmlFor="bronze-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Bronze.png" alt="Bronze" width="24" />
+                <img src="/Bronze.png" alt="Bronze" width="24" />
               </div>
               Bronze
             </label>
@@ -37,7 +37,7 @@ export const ControlRate = ({
             />
             <label htmlFor="silver-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Silver.png" alt="Silver" width="24" />
+                <img src="/Silver.png" alt="Silver" width="24" />
               </div>
               Silver
             </label>
@@ -54,7 +54,7 @@ export const ControlRate = ({
             />
             <label htmlFor="gold-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Gold.png" alt="Gold" width="24" />
+                <img src="/Gold.png" alt="Gold" width="24" />
               </div>
               Gold
             </label>
@@ -74,7 +74,7 @@ export const ControlRate = ({
             />
             <label htmlFor="platinum-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Platinum.png" alt="Platinum" width="24" />
+                <img src="/Platinum.png" alt="Platinum" width="24" />
               </div>
               Platinum
             </label>
@@ -91,7 +91,7 @@ export const ControlRate = ({
             />
             <label htmlFor="diamond-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Diamond.png" alt="Diamond" width="24" />
+                <img src="/Diamond.png" alt="Diamond" width="24" />
               </div>
               Diamond
             </label>
@@ -108,7 +108,7 @@ export const ControlRate = ({
             />
             <label htmlFor="masters-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Masters.png" alt="Masters" width="28" />
+                <img src="/Masters.png" alt="Masters" width="28" />
               </div>
               Masters
             </label>
@@ -128,11 +128,7 @@ export const ControlRate = ({
             />
             <label htmlFor="grandmaster-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img
-                  src="./public/Grandmaster.png"
-                  alt="Grandmaster"
-                  width="32"
-                />
+                <img src="/Grandmaster.png" alt="Grandmaster" width="32" />
               </div>
               Grandmaster
             </label>
@@ -149,7 +145,7 @@ export const ControlRate = ({
             />
             <label htmlFor="champion-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Champion.png" alt="Champion" width="32" />
+                <img src="/Champion.png" alt="Champion" width="32" />
               </div>
               Champion
             </label>
@@ -166,7 +162,7 @@ export const ControlRate = ({
             />
             <label htmlFor="top500-btn" className="flex items-center">
               <div className="mb-1 mr-1 flex w-8 justify-center">
-                <img src="./public/Top500.png" alt="Top500" width="32" />
+                <img src="/Top500.png" alt="Top500" width="32" />
               </div>
               Top500
             </label>
diff --git a/src/Components/ViewerRate/ViewerRate.tsx b/src/Components/ViewerRate/ViewerRate.tsx
index 6386d7a..c35d8d0 100644
--- a/src/Components/ViewerRate/ViewerRate.tsx
+++ b/src/Components/ViewerRate/ViewerRate.tsx
@@ -40,63 +40,63 @@ export const ViewerRate = ({
       >
         <img
           id="bronze"
-          src="./public/Bronze.png"
+          src="/Bronze.png"
           alt="Bronze"
           height="48"
           className={`${rate === "bronze" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="silver"
-          src="./public/Silver.png"
+          src="/Silver.png"
           alt="Silver"
           height="48"
           className={`${rate === "silver" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="gold"
-          src="./public/Gold.png"
+          src="/Gold.png"
           alt="Gold"
           height="48"
           className={`${rate === "gold" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="platinum"
-          src="./public/Platinum.png"
+          src="/Platinum.png"
           alt="Platinum"
           height="48"
           className={`${rate === "platinum" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="diamond"
-          src="./public/Diamond.png"
+          src="/Diamond.png"
           alt="Diamond"
           height="48"
           className={`${rate === "diamond" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="masters"
-          src="./public/Masters.png"
+          src="/Masters.png"
           alt="Masters"
           height="48"
           className={`${rate === "masters" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="grandmaster"
-          src="./public/Grandmaster.png"
+          src="/Grandmaster.png"
           alt="Grandmaster"
           height="48"
           className={`${rate === "grandmaster" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="champion"
-          src="./public/Champion.png"
+          src="/Champion.png"
           alt="Champion"
           height="48"
           className={`${rate === "champion" ? "flex" : "hidden"} mt-1 h-[48px]`}
         />
         <img
           id="top500"
-          src="./public/Top500.png"
+          src="/Top500.png"
           alt="Top500"
           height="48"
           className={`${rate === "top500" ? "flex" : "hidden"} mt-1 h-[48px]`}