diff --git a/my-app/app/BuyBlock.tsx b/my-app/app/BuyBlock.tsx
index 43d1155..d4acd88 100644
--- a/my-app/app/BuyBlock.tsx
+++ b/my-app/app/BuyBlock.tsx
@@ -1,101 +1,97 @@
-import { environment } from "@/environment";
-import { ChangeEvent, useState } from "react";
+import { useState } from "react";
 import { useEffect } from "react";
 
 export default function BuyBlock() {
-  const [itemName, setItemName] = useState("");
-  const [price, setPrice] = useState("");
-  const [allItemNames, setAllItemNames] = useState<string[]>([]);
+    const [itemName, setItemName] = useState("");
+    const [price, setPrice] = useState("");
+    const [allItemNames, setAllItemNames] = useState([]);
 
-  useEffect(() => {
-    fetch(`${environment.API_BASE_URL}/all_items`)
-      .then((response) => response.json())
-      .then((data) => {
-        setAllItemNames(data.item_names);
-      })
-      .catch((error) => console.log(error));
-  }, []);
-
-  const handleItemNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = event.target.value;
-    const formattedInputValue = inputValue.replace(/\s+/g, "_");
-    setItemName(formattedInputValue);
-  };
-
-  const handleButtonClick = () => {
-    if (itemName === "" || price === "" || isNaN(Number(price))) {
-      // Check if either textbox is empty or price is not a number
-      return;
-    }
-
-    const formattedItemName = itemName.replace(/\s+/g, "_").toLowerCase();
-
-    if (!allItemNames.includes(formattedItemName)) {
-      // Check if the formatted item name is not in the predetermined list
-      return;
-    }
-
-    const itemData = {
-      name: formattedItemName,
-      purchasePrice: price,
-      number: 1,
-    };
-    (document.getElementById("buyButton") as HTMLButtonElement)!.disabled =
-      true;
-
-    fetch(`${environment.API_BASE_URL}/item`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(itemData),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        // Handle response data if needed
-        console.log(data);
-
-        // Send transaction data
-        const transactionData = {
-          name: formattedItemName,
-          transaction_type: "buy",
-          price: price,
-        };
-
-        fetch(`${environment.API_BASE_URL}/transaction`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(transactionData),
+    useEffect(() => {
+      fetch("http://127.0.0.1:8000/all_items")
+        .then((response) => response.json())
+        .then((data) => {
+          setAllItemNames(data.item_names);
         })
-          .then((response) => response.json())
-          .then((transactionResponse) => {
-            // Handle transaction response if needed
-            console.log(transactionResponse);
+        .catch((error) => console.log(error));
+    }, []);
 
-            // Reset input values
-            setItemName("");
-            setPrice("");
+    const handleItemNameChange = (event) => {
+      const inputValue = event.target.value;
+      const formattedInputValue = inputValue.replace(/\s+/g, "_");
+      setItemName(formattedInputValue);
+    };
+    
+    const handleButtonClick = () => {
+      if (itemName === "" || price === "" || isNaN(price)) {
+        // Check if either textbox is empty or price is not a number
+        return;
+      }
+  
+      const formattedItemName = itemName.replace(/\s+/g, "_").toLowerCase();
 
-            //window.location.reload();
-          })
-          .catch((error) => console.log(error));
+      if (!allItemNames.includes(formattedItemName)) {
+        // Check if the formatted item name is not in the predetermined list
+        return;
+      }
+  
+      const itemData = {
+        name: formattedItemName,
+        purchasePrice: price,
+        number: 1,
+      };
+      document.getElementById("buyButton").disabled = true;
+  
+      fetch("http://127.0.0.1:8000/item/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(itemData),
       })
-      .catch((error) => console.log(error));
-
-    setItemName("");
-    setPrice("");
-
-    (document.getElementById("buyButton") as HTMLButtonElement)!.disabled =
-      false;
-  };
-
-  return (
-    <div className="items-center justify-center p-8 pb-12 rounded-full  bg-black-custom shadow-lg shadow-slate-400">
-      <h1 className="pb-4 text-lg">Purchase New Item:</h1>
-      <input
-        className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
+        .then((response) => response.json())
+        .then((data) => {
+          // Handle response data if needed
+          console.log(data);
+  
+          // Send transaction data
+          const transactionData = {
+            name: formattedItemName,
+            transaction_type: "buy",
+            price: price,
+          };
+  
+          fetch("http://127.0.0.1:8000/transaction/", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(transactionData),
+          })
+            .then((response) => response.json())
+            .then((transactionResponse) => {
+              // Handle transaction response if needed
+              console.log(transactionResponse);
+  
+              // Reset input values
+              setItemName("");
+              setPrice("");
+  
+              //window.location.reload();
+            })
+            .catch((error) => console.log(error));
+        })
+        .catch((error) => console.log(error));
+  
+      setItemName("");
+      setPrice("");
+      document.getElementById("buyButton").disabled = false;
+    };
+    
+    return (
+      <div className="w-[36vw] m-auto items-center justify-center p-[1.5vw] rounded-[1vw] bg-grey-custom-light mb-[1.5vw]">
+        <h1 className="pb-[1vw] text-[1vw]">Purchase New Item:</h1>
+        <input
+        className="text-center w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
         type="text"
         list="itemNames"
         placeholder="Item Name"
@@ -107,22 +103,16 @@ export default function BuyBlock() {
           <option key={name} value={name} />
         ))}
       </datalist>
-      <input
-        className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
-        type="text"
-        placeholder="Price"
-        value={price}
-        onChange={(event) => setPrice(event.target.value)}
-      />
-      <div className="pt-2">
-        <button
-          className="py-2 px-6 rounded-md bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
-          onClick={handleButtonClick}
-          id="buyButton"
-        >
-          Buy
-        </button>
+        <input
+          className="text-center w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
+          type="text"
+          placeholder="Price"
+          value={price}
+          onChange={(event) => setPrice(event.target.value)}
+        />
+        
+        <button className="py-[0.3vw] px-[0.5vw] w-[4vw] h-[2vw] bg-blue-custom-light text-black-custom-text text-[0.9vw] hover:bg-blue-custom-highlight transition duration-500" onClick={handleButtonClick} id="buyButton">Buy</button>
+        
       </div>
-    </div>
-  );
-}
+    );
+  }
diff --git a/my-app/app/Clock.tsx b/my-app/app/Clock.tsx
index 51533a6..5ce27ff 100644
--- a/my-app/app/Clock.tsx
+++ b/my-app/app/Clock.tsx
@@ -2,47 +2,48 @@ import { useEffect } from "react";
 import { useState } from "react";
 
 export default function Clock() {
-  const [currentTime, setCurrentTime] = useState("");
-  const [timeUntilMidnight, setTimeUntilMidnight] = useState("");
+    const [currentTime, setCurrentTime] = useState("");
+    const [timeUntilMidnight, setTimeUntilMidnight] = useState("");
+  
+    useEffect(() => {
+      const interval = setInterval(() => {
+        const date = new Date();
+        const hours = date.getUTCHours().toString().padStart(2, "0");
+        const minutes = date.getUTCMinutes().toString().padStart(2, "0");
+        const seconds = date.getUTCSeconds().toString().padStart(2, "0");
+        const time = `${hours}:${minutes}:${seconds}`;
+        setCurrentTime(time);
+  
+        // Calculate time until midnight
+        const midnight = new Date(date);
+        midnight.setUTCHours(24, 0, 0, 0);
+        const timeUntilMidnightMillis = midnight - date;
+        const hoursUntilMidnight = Math.floor(timeUntilMidnightMillis / 3600000);
+        const minutesUntilMidnight = Math.floor(
+          (timeUntilMidnightMillis % 3600000) / 60000
+        );
+        const secondsUntilMidnight = Math.floor(
+          (timeUntilMidnightMillis % 60000) / 1000
+        );
+        // Pad the time values with leading zeros
+        const paddedHours = hoursUntilMidnight.toString().padStart(2, '0');
+        const paddedMinutes = minutesUntilMidnight.toString().padStart(2, '0');
+        const paddedSeconds = secondsUntilMidnight.toString().padStart(2, '0');
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const date = new Date();
-      const hours = date.getUTCHours().toString().padStart(2, "0");
-      const minutes = date.getUTCMinutes().toString().padStart(2, "0");
-      const seconds = date.getUTCSeconds().toString().padStart(2, "0");
-      const time = `${hours}:${minutes}:${seconds}`;
-      setCurrentTime(time);
-
-      // Calculate time until midnight
-      const midnight = new Date(date);
-      midnight.setUTCHours(24, 0, 0, 0);
-      const timeUntilMidnightMillis = midnight.valueOf() - date.valueOf();
-      const hoursUntilMidnight = Math.floor(timeUntilMidnightMillis / 3600000);
-      const minutesUntilMidnight = Math.floor(
-        (timeUntilMidnightMillis % 3600000) / 60000
-      );
-      const secondsUntilMidnight = Math.floor(
-        (timeUntilMidnightMillis % 60000) / 1000
-      );
-      // Pad the time values with leading zeros
-      const paddedHours = hoursUntilMidnight.toString().padStart(2, "0");
-      const paddedMinutes = minutesUntilMidnight.toString().padStart(2, "0");
-      const paddedSeconds = secondsUntilMidnight.toString().padStart(2, "0");
-
-      const timeUntilMidnight = `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
-      setTimeUntilMidnight(timeUntilMidnight);
-    }, 1000); // Update every second
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  return (
-    <div className="absolute top-4 left-4 text-left">
-      <div>GMT: {currentTime}</div>
-      <div>Time until midnight GMT: {timeUntilMidnight}</div>
-    </div>
-  );
-}
+        const timeUntilMidnight = `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+        setTimeUntilMidnight(timeUntilMidnight);
+      }, 1000); // Update every second
+  
+      return () => {
+        clearInterval(interval);
+      };
+    }, []);
+  
+    return (
+      <div className="absolute top-[2vh] left-[2vh] text-left z-100 text-[1vw]">
+        <div>GMT: {currentTime}</div>
+        <div>Time until midnight GMT: {timeUntilMidnight}</div>
+      </div>
+    );
+  }
+  
diff --git a/my-app/app/GraphGen.tsx b/my-app/app/GraphGen.tsx
index a9eb10d..de8c91c 100644
--- a/my-app/app/GraphGen.tsx
+++ b/my-app/app/GraphGen.tsx
@@ -1,89 +1,88 @@
-import { environment } from "@/environment";
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
-const GraphGen: React.FC = () => {
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageUrl, setImageUrl] = useState("");
-
-  const handleStartDateChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setStartDate(event.target.value);
-  };
-
-  const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setEndDate(event.target.value);
-  };
-
-  const handleButtonClick = () => {
-    // Make the API call with the start and end dates
-    const apiUrl = `${environment.API_BASE_URL}/graph?startDate=${startDate}&endDate=${endDate}`;
-
-    // You can use any method for making the API call, e.g., fetch, axios, etc.
-    // Assuming using fetch here for simplicity
-    fetch(apiUrl)
-      .then((response) => {
-        if (response.ok) {
-          // Save the image to public/accValue.png
-          return response.blob();
-        }
-        throw new Error("API request failed");
-      })
-      .then((imageBlob) => {
-        // Create a local URL for the image blob
-        const imageUrl = URL.createObjectURL(imageBlob);
 
-        // Set the image URL and mark it as loaded
-        setImageUrl(imageUrl);
-        setImageLoaded(true);
-      })
-      .catch((error) => {
-        console.error(error);
-        // Handle error
-      });
+const GraphGen: React.FC = () => {
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageUrl, setImageUrl] = useState('');
+  
+    const handleStartDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setStartDate(event.target.value);
+    };
+  
+    const handleEndDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setEndDate(event.target.value);
+    };
+  
+    const handleButtonClick = () => {
+      // Make the API call with the start and end dates
+      const apiUrl = `http://127.0.0.1:8000/graph?startDate=${startDate}&endDate=${endDate}`;
+  
+      // You can use any method for making the API call, e.g., fetch, axios, etc.
+      // Assuming using fetch here for simplicity
+      fetch(apiUrl)
+        .then(response => {
+          if (response.ok) {
+            // Save the image to public/accValue.png
+            return response.blob();
+          }
+          throw new Error('API request failed');
+        })
+        .then(imageBlob => {
+          // Create a local URL for the image blob
+          const imageUrl = URL.createObjectURL(imageBlob);
+  
+          // Set the image URL and mark it as loaded
+          setImageUrl(imageUrl);
+          setImageLoaded(true);
+        })
+        .catch(error => {
+          console.error(error);
+          // Handle error
+        });
+    };
+  
+    let imageElement = null;
+    if (imageLoaded) {
+      imageElement = <img className="mx-auto" src={imageUrl} alt="Graph" />;
+    }
+  
+    return (
+      <div className="w-[36vw] m-auto items-center justify-center p-[1.5vw] rounded-[1vw] bg-grey-custom-light ">
+        <table className='w-[100%] '>
+          <tbody>
+            <tr className='leading-[1vw]'>
+              <td>
+                <input 
+                  className="text-center inline w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[0.1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
+                  type="text" 
+                  id="startDate" 
+                  placeholder='YYYY-MM-DD'
+                  value={startDate} 
+                  onChange={handleStartDateChange} />
+              </td>
+              <td>
+                <input 
+                  className="text-center inline w-[15vw] h-[1vw] py-[1vw] px-[2vw] mx-[0.1vw] mb-[0.1vw] text-[0.9vw] shadow-[inset_0_0px_0px_0.25vw] shadow-grey-custom-darkgreen border-blue-custom bg-black-custom border-[0.1vw] text-white-custom"
+                  type="text" 
+                  id="endDate" 
+                  placeholder='YYYY-MM-DD'
+                  value={endDate} 
+                  onChange={handleEndDateChange} />
+              </td>
+            </tr>
+            <tr className='leading-[1vw]'>
+              <td><label htmlFor="startDate" className='inline-block align-bottom text-[0.7vw] text-center text-white-custom/30'>Start Date</label></td>
+              <td><label htmlFor="endDate" className='inline-block align-bottom text-[0.7vw] text-center text-white-custom/30'>End Date</label></td>
+            </tr>
+          </tbody>
+        </table>
+        <button className="py-[0.3vw] px-[0.5vw] w-[6vw] h-[2vw] mb-[1vw] bg-blue-custom-light text-black-custom-text text-[0.9vw] hover:bg-blue-custom-highlight transition duration-500"  onClick={handleButtonClick}>Load Graph</button>
+        
+        {imageElement}
+      </div>
+    );
   };
 
-  let imageElement = null;
-  if (imageLoaded) {
-    imageElement = <img className="mx-auto" src={imageUrl} alt="Graph" />;
-  }
-
-  return (
-    <div className="p-8 shadow-lg shadow-slate-400 bg-black-custom rounded-md">
-      <label htmlFor="startDate">Start Date: </label>
-      <input
-        className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
-        type="text"
-        id="startDate"
-        placeholder="YYYY-MM-DD"
-        value={startDate}
-        onChange={handleStartDateChange}
-      />
-      <br></br>
-
-      <label htmlFor="endDate">End Date: </label>
-      <input
-        className="text-center py-2 px-4 mb-4 border border-purple-custom-saturated rounded-lg bg-slate-600 text-white-custom"
-        type="text"
-        id="endDate"
-        placeholder="YYYY-MM-DD"
-        value={endDate}
-        onChange={handleEndDateChange}
-      />
-      <br></br>
-
-      <button
-        className="py-2 px-6 rounded-md bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
-        onClick={handleButtonClick}
-      >
-        Load Graph
-      </button>
-
-      {imageElement}
-    </div>
-  );
-};
-
 export default GraphGen;
diff --git a/my-app/app/LiveScraperButton.tsx b/my-app/app/LiveScraperButton.tsx
index 3ad9d1d..7303b59 100644
--- a/my-app/app/LiveScraperButton.tsx
+++ b/my-app/app/LiveScraperButton.tsx
@@ -1,4 +1,3 @@
-import { environment } from "@/environment";
 import { useState, useEffect } from "react";
 
 function LiveScraperButton() {
@@ -6,7 +5,7 @@ function LiveScraperButton() {
 
   const fetchData = async () => {
     try {
-      const response = await fetch(`${environment.API_BASE_URL}/live_scraper`);
+      const response = await fetch("http://127.0.0.1:8000/live_scraper");
       const data = await response.json();
       setIsRunning(data.Running);
     } catch (error) {
@@ -26,8 +25,8 @@ function LiveScraperButton() {
 
   const handleButtonClick = () => {
     const apiUrl = isRunning
-      ? `${environment.API_BASE_URL}/live_scraper/stop`
-      : `${environment.API_BASE_URL}/live_scraper/start`;
+      ? "http://127.0.0.1:8000/live_scraper/stop"
+      : "http://127.0.0.1:8000/live_scraper/start";
 
     fetch(apiUrl, {
       method: "POST",
@@ -43,24 +42,18 @@ function LiveScraperButton() {
   };
 
   return (
-    <div className="p-2">
-      <button
+    <div className="p-[0.5vw]">
+      <button 
         className={
           isRunning
-            ? "p-1 rounded-lg bg-rose-700 text-white-custom shadow-md shadow-rose-700"
-            : "p-1 rounded-lg bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
+            ? "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-green-custom-light text-green-custom-light transition delay-50 hover:bg-blue-custom-highlight hover:border-blue-custom-highlight"
+            : "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-red-custom text-red-custom transition delay-50 hover:bg-red-custom-highlight hover:border-red-custom-highlight hover:text-black-custom-text "
         }
-        onClick={handleButtonClick}
-      >
-        {isRunning ? "Stop" : "Start"}
+          onClick={handleButtonClick}>
+        Market Updater
       </button>
-      <span>
-        {isRunning
-          ? " - Live Updater Status: Running"
-          : " - Live Updater Status: Not running"}
-      </span>
     </div>
   );
 }
 
-export default LiveScraperButton;
+export default LiveScraperButton;
\ No newline at end of file
diff --git a/my-app/app/RowDisplay.tsx b/my-app/app/RowDisplay.tsx
index fe2c465..e3e6b8c 100644
--- a/my-app/app/RowDisplay.tsx
+++ b/my-app/app/RowDisplay.tsx
@@ -1,31 +1,29 @@
-import { environment } from "@/environment";
 import { useState } from "react";
 import { useEffect } from "react";
-
 interface Row {
-  id: number;
-  name: string;
-  purchasePrice: number;
-  listedPrice: number;
-  number: number;
-}
-
+    id: number;
+    name: string;
+    purchasePrice: number;
+    listedPrice: number;
+    number: number;
+  }
+  
 export default function RowDisplay() {
-  const [rows, setRows] = useState<Row[]>([]);
+  const [rows, setRows] = useState([]);
   const [inProg, setInProg] = useState("");
 
   useEffect(() => {
     // Fetch data from the REST API
     const interval = setInterval(() => {
       console.log("ping");
-      fetch(`${environment.API_BASE_URL}/items`)
+      fetch("http://127.0.0.1:8000/items")
         .then((response) => response.json())
         .then((data) => setRows(data))
         .catch((error) => console.log(error));
     }, 1000); // Update every second
 
     console.log("In useEffect");
-    fetch(`${environment.API_BASE_URL}/items`)
+    fetch("http://127.0.0.1:8000/items")
       .then((response) => response.json())
       .then((data) => setRows(data))
       .catch((error) => console.log(error));
@@ -36,18 +34,19 @@ export default function RowDisplay() {
   }, []);
 
   const handleButtonClick = (
-    itemName: string,
-    purchasePrice: number,
-    listedPrice: number,
-    number: number,
-    price: string,
-    buttonId: string
+    itemName,
+    purchasePrice,
+    listedPrice,
+    number,
+    price,
+    buttonId
   ) => {
+
     if (price.trim() === "") {
       // Do nothing if the price is not entered
       return;
     }
-
+    
     const updatedNumber = number - 1;
     setInProg("IN PROGRESS");
 
@@ -65,10 +64,10 @@ export default function RowDisplay() {
       price: parseFloat(price),
     };
     // Disable the button
-    (document.getElementById(buttonId) as HTMLButtonElement)!.disabled = true;
+    document.getElementById(buttonId).disabled = true;
 
     // Trigger PUT API call to "/market/{item_name}"
-    fetch(`${environment.API_BASE_URL}/market/${itemName}`, {
+    fetch(`http://127.0.0.1:8000/market/${itemName}`, {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
@@ -82,7 +81,7 @@ export default function RowDisplay() {
         setInProg("");
 
         // After the PUT API call to "/market/{item_name}" is completed, trigger the POST API call to "/transaction/"
-        fetch(`${environment.API_BASE_URL}/transaction/`, {
+        fetch(`http://127.0.0.1:8000/transaction/`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -95,7 +94,7 @@ export default function RowDisplay() {
             console.log(transactionResponseData);
 
             // After the POST API call to "/transaction/" is completed, trigger the GET API call to "/item"
-            fetch(`${environment.API_BASE_URL}/item/sell`, {
+            fetch(`http://127.0.0.1:8000/item/sell`, {
               method: "POST",
               headers: {
                 "Content-Type": "application/json",
@@ -108,13 +107,11 @@ export default function RowDisplay() {
                 console.log(itemResponseData);
 
                 // After the PUT API call to "/item" is completed, trigger the GET API call to "/items"
-                fetch(`${environment.API_BASE_URL}/items`)
+                fetch("http://127.0.0.1:8000/items")
                   .then((response) => response.json())
                   .then((data) => {
                     setRows(data);
-                    (document.getElementById(
-                      buttonId
-                    ) as HTMLButtonElement)!.disabled = false;
+                    document.getElementById(buttonId).disabled = false;
                   })
                   .catch((error) => console.log(error));
               })
@@ -126,15 +123,15 @@ export default function RowDisplay() {
   };
 
   return (
-    <div className="items-center justify-center p-8 pb-12 rounded-lg bg-black-custom shadow-lg shadow-slate-400">
-      <h1 className="pb-4 text-lg">Inventory:</h1>
+    <div className="items-center justify-center p-[1.5vw] w-[36vw] m-auto rounded-[1vw] bg-grey-custom-light mb-[1.5vw]">
+      <h1 className="pb-[1vw] text-[1vw]">Inventory:</h1>
       <div className="w-full flex flex-col">
-        <div className="flex font-bold py-2">
-          <div className="w-2/6 px-4">Name:</div>
-          <div className="w-1/6 px-4">Avg Purchase Price:</div>
-          <div className="w-1/6 px-4">Listed Price:</div>
-          <div className="w-1/6 px-4">Number Owned:</div>
-          <div className="w-1/6 px-4">Sell Price:</div>
+        <div className="flex font-bold py-[0.5vw] text-[0.8vw]">
+          <div className="w-2/6 px-[2vw]">Name:</div>
+          <div className="w-1/6 px-[2vw]">Avg Buy:</div>
+          <div className="w-1/6 px-[2vw]">Listed Price:</div>
+          <div className="w-1/6 px-[2vw]">Number Owned:</div>
+          <div className="w-1/6 px-[2vw]">Sell Price:</div>
         </div>
         {rows.map((row) => {
           const textBoxId = `textbox-${row.id}`;
@@ -142,18 +139,18 @@ export default function RowDisplay() {
           return (
             <div
               key={row.id}
-              className="flex items-center border-b border-gray-300 py-2"
+              className="flex text-[0.6vw] items-center border-b-[0.1vw] border-grey-custom py-[0.5vw]"
             >
-              <div className="w-2/6 px-4">{row.name}</div>
-              <div className="w-1/6 px-4">{row.purchasePrice}</div>
-              <div className="w-1/6 px-4">{row.listedPrice}</div>
-              <div className="w-1/6 px-4">{row.number}</div>
-              <div className="w-1/6 px-4">
-                <div className="min-w-[100px]">
+              <div className="w-2/6 px-[2vw]">{row.name}</div>
+              <div className="w-1/6 px-[2vw]">{row.purchasePrice}</div>
+              <div className="w-1/6 px-[2vw]">{row.listedPrice}</div>
+              <div className="w-1/6 px-[2vw]">{row.number}</div>
+              <div className="w-1/6 px-[2vw]">
+                <div className="min-w-[0.5vw]">
                   <input
                     type="text"
                     id={textBoxId}
-                    className="text-center py-1 px-2 w-12 border border-purple-custom-saturated rounded-lg bg-slate-600"
+                    className="text-center py-[0.5vw] px-[1vw] w-[2vw] shadow-[inset_0_0px_0px_0.25vw] border-[0.1vw] shadow-grey-custom-darkgreen border-blue-custom bg-black-custom text-white-custom"
                   />
                   <button
                     onClick={() =>
@@ -162,13 +159,12 @@ export default function RowDisplay() {
                         row.purchasePrice,
                         row.listedPrice,
                         row.number,
-                        (document.getElementById(textBoxId) as HTMLInputElement)
-                          ?.value,
+                        document.getElementById(textBoxId).value,
                         buttonId
                       )
                     }
                     id={buttonId}
-                    className="py-1 px-2 rounded-md bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
+                    className="py-[0.3vw] px-[0.5vw] bg-blue-custom-light text-black-custom-text text-[0.9vw] hover:bg-blue-custom-highlight transition duration-500"
                   >
                     Sell
                   </button>
@@ -181,4 +177,4 @@ export default function RowDisplay() {
       {inProg}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/my-app/app/ScreenReaderButton.tsx b/my-app/app/ScreenReaderButton.tsx
index 30812dd..6c46d29 100644
--- a/my-app/app/ScreenReaderButton.tsx
+++ b/my-app/app/ScreenReaderButton.tsx
@@ -1,12 +1,12 @@
-import { environment } from "@/environment";
 import { useState, useEffect } from "react";
+import config from "../../config.json";
 
 function ScreenReaderButton() {
   const [isRunning, setIsRunning] = useState(false);
 
   const fetchData = async () => {
     try {
-      const response = await fetch(`${environment.API_BASE_URL}/screen_reader`);
+      const response = await fetch("http://127.0.0.1:8000/screen_reader");
       const data = await response.json();
       setIsRunning(data.Running);
     } catch (error) {
@@ -26,8 +26,8 @@ function ScreenReaderButton() {
 
   const handleButtonClick = () => {
     const apiUrl = isRunning
-      ? `${environment.API_BASE_URL}/screen_reader/stop`
-      : `${environment.API_BASE_URL}/screen_reader/start`;
+      ? "http://127.0.0.1:8000/screen_reader/stop"
+      : "http://127.0.0.1:8000/screen_reader/start";
 
     fetch(apiUrl, {
       method: "POST",
@@ -42,25 +42,21 @@ function ScreenReaderButton() {
       .catch((error) => console.log(error));
   };
 
-  return (
-    <div>
+  return(
+    <div className="p-[0.5vw]">
       <button
         className={
           isRunning
-            ? "p-1 rounded-lg bg-rose-700 text-white-custom shadow-md shadow-rose-700"
-            : "p-1 rounded-lg bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
+            ? "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-green-custom-light text-green-custom-light transition delay-50 hover:bg-blue-custom-highlight hover:border-blue-custom-highlight"
+            : "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-red-custom text-red-custom transition delay-50 hover:bg-red-custom-highlight hover:border-red-custom-highlight hover:text-black-custom-text "
         }
         onClick={handleButtonClick}
       >
-        {isRunning ? "Stop" : "Start"}
+        Screen Reader
       </button>
-      <span>
-        {isRunning
-          ? " - Screen Reader Status: Running"
-          : " - Screen Reader Status: Not running"}
-      </span>
+
     </div>
   );
 }
 
-export default ScreenReaderButton;
+export default ScreenReaderButton;
\ No newline at end of file
diff --git a/my-app/app/StatsScraperButton.tsx b/my-app/app/StatsScraperButton.tsx
index 2504ef8..cc09077 100644
--- a/my-app/app/StatsScraperButton.tsx
+++ b/my-app/app/StatsScraperButton.tsx
@@ -1,4 +1,3 @@
-import { environment } from "@/environment";
 import { useState, useEffect } from "react";
 
 function StatsScraperButton() {
@@ -6,7 +5,7 @@ function StatsScraperButton() {
 
   const fetchData = async () => {
     try {
-      const response = await fetch(`${environment.API_BASE_URL}/stats_scraper`);
+      const response = await fetch("http://127.0.0.1:8000/stats_scraper");
       const data = await response.json();
       setIsRunning(data.Running);
     } catch (error) {
@@ -26,8 +25,8 @@ function StatsScraperButton() {
 
   const handleButtonClick = () => {
     const apiUrl = isRunning
-      ? `${environment.API_BASE_URL}/stats_scraper/stop`
-      : `${environment.API_BASE_URL}/stats_scraper/start`;
+      ? "http://127.0.0.1:8000/stats_scraper/stop"
+      : "http://127.0.0.1:8000/stats_scraper/start";
 
     fetch(apiUrl, {
       method: "POST",
@@ -43,24 +42,18 @@ function StatsScraperButton() {
   };
 
   return (
-    <div>
+    <div className="p-[0.5vw]">
       <button
         className={
           isRunning
-            ? "p-1 rounded-lg bg-rose-700 text-white-custom shadow-md shadow-rose-700"
-            : "p-1 rounded-lg bg-purple-custom-saturated text-white-custom shadow-md shadow-purple-700"
+            ? "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-green-custom-light text-green-custom-light transition delay-50 hover:bg-blue-custom-highlight hover:border-blue-custom-highlight"
+            : "p-[0.5vw] rounded-[0.5vw] w-[6.5vw] h-[6.5vw] bg-transparent border-[0.1vw] border-red-custom text-red-custom transition delay-50 hover:bg-red-custom-highlight hover:border-red-custom-highlight hover:text-black-custom-text "
         }
-        onClick={handleButtonClick}
-      >
-        {isRunning ? "Stop" : "Start"}
+        onClick={handleButtonClick}>
+        Market Stats
       </button>
-      <span>
-        {isRunning
-          ? " - Stats Reader Status: Running"
-          : " - Stats Reader Status: Not running"}
-      </span>
     </div>
   );
 }
 
-export default StatsScraperButton;
+export default StatsScraperButton;
\ No newline at end of file
diff --git a/my-app/app/globals.css b/my-app/app/globals.css
index b5c61c9..bd6213e 100644
--- a/my-app/app/globals.css
+++ b/my-app/app/globals.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/my-app/app/layout.tsx b/my-app/app/layout.tsx
index b4650dd..1629c89 100644
--- a/my-app/app/layout.tsx
+++ b/my-app/app/layout.tsx
@@ -1,18 +1,22 @@
-import { PropsWithChildren } from "react";
-import "./globals.css";
-import { Inter } from "next/font/google";
+import './globals.css'
+import { Inter } from 'next/font/google'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: "Warframe Inventory Manager",
-  description: "Generated by create next app",
-};
+  title: 'Warframe Inventory Manager',
+  description: 'Generated by create next app',
+}
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default function RootLayout({
+  children,
+}: 
+{
+  children: React.ReactNode
+}) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  );
+  )
 }
diff --git a/my-app/app/page.tsx b/my-app/app/page.tsx
index 75e0a11..1da595d 100644
--- a/my-app/app/page.tsx
+++ b/my-app/app/page.tsx
@@ -10,7 +10,6 @@ import LiveScraperButton from "./LiveScraperButton";
 import StatsScraperButton from "./StatsScraperButton";
 import ScreenReaderButton from "./ScreenReaderButton";
 import GraphGen from "./GraphGen";
-import { environment } from "@/environment";
 
 interface ItemTotals {
   total_purchase_price: number;
@@ -19,7 +18,7 @@ interface ItemTotals {
 
 async function fetchItemTotals(): Promise<ItemTotals> {
   try {
-    const response = await fetch(`${environment.API_BASE_URL}/items/sum`);
+    const response = await fetch("http://127.0.0.1:8000/items/sum");
     const data = await response.json();
     return data;
   } catch (error) {
@@ -53,37 +52,39 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="flex h-full min-h-screen text-purple-custom-light bg-gradient-to-b from-black-custom via-cyan-900 to-cyan-800">
-      <div className="w-1/2 text-center items-center p-32 justify-center">
+      <div className="flex h-full min-h-screen text-grey-custom bg-grey-custom-green bg-cover bg-center ">
         <Clock />
+        <div className="w-[50vw] text-center items-center p-[5vw] justify-center self-center">
 
-        <h1 className="text-center font-semibold pb-12 text-4xl">
-          Inventory Manager
-        </h1>
-        <BuyBlock />
-        <br></br>
-        <RowDisplay />
-        <br></br>
-        <div className="p-4 rounded-md  bg-black-custom shadow-lg shadow-slate-400">
-          Total Purchase Price: {itemTotals.total_purchase_price}
-          <br />
-          Total Listed Price: {itemTotals.total_listed_price}
+          
+          
+          <h1 className="text-center font-semibold pb-[1vw] text-[2vw]">
+            Inventory Manager
+          </h1>
+          <BuyBlock />
+          
+          <RowDisplay />
+          
+          <div className="text-left p-[1vw] m-auto rounded-[1vw] bg-grey-custom-light w-[36vw] text-[0.8vw]">
+            Total Purchase Price: {itemTotals.total_purchase_price}<br />
+            Total Listed Price: {itemTotals.total_listed_price}
+          </div>
+          
         </div>
-      </div>
-      <div className="w-1/2 text-center items-center p-32 justify-center">
-        <h1 className="text-center font-semibold pb-12 text-4xl">
-          Transaction Control
-        </h1>
-        <div className="p-4 rounded-full bg-black-custom shadow-lg shadow-slate-400">
-          <StatsScraperButton />
-          <LiveScraperButton />
-          <ScreenReaderButton />
+        <div className="w-[50vw] text-center items-center p-[5vw] justify-center self-center">
+          <h1 className="text-center font-semibold pb-[1vw] text-[2vw]">
+            Transaction Control
+          </h1>
+          <div className="flex flex-row justify-center p-[1vw] rounded-[1vw] bg-grey-custom-light text-[0.9vw]">
+            <StatsScraperButton />
+            <LiveScraperButton />
+            <ScreenReaderButton />
+          </div>
+          <h1 className="text-center font-semibold pt-[1vw] pb-[1vw] text-[2vw]">
+            Visualizations
+          </h1>
+          <GraphGen />
         </div>
-        <h1 className="text-center font-semibold p-12 text-4xl">
-          Visualizations
-        </h1>
-        <GraphGen />
       </div>
-    </div>
-  );
+  )
 }
diff --git a/my-app/tailwind.config.js b/my-app/tailwind.config.js
index aea0185..5141ff6 100644
--- a/my-app/tailwind.config.js
+++ b/my-app/tailwind.config.js
@@ -11,17 +11,30 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'black-custom':'#0A090C',
-        'green-custom' : '#07393C',
+        'pink-custom': '#d93f87',
+        'purple-custom-saturated':'#5323ab',
+        'grey-custom' : '#aab3b6',
+        'grey-custom-dark' : '#2d3437',
+        'grey-custom-light' : '#171e21',
+        'grey-custom-green' : '#101619',
+        'grey-custom-darkgreen' : '#071013',
+        'blue-custom' : '#202f36',
+        'blue-custom-light' : '#3c879c',
+        'blue-custom-highlight' : '#5ff5ff',
+        'black-custom-text' : '#161e21',
+        'black-custom' : '#121212',
         'white-custom' : '#E5ECF4',
-        'purple-custom-light' : '#C3BEF7',
-        'purple-custom-saturated' : '#8A4FFF'
+        'purple-custom-light' : '#8265a7',
+        'red-custom' : '#a52f31',
+        'red-custom-highlight' : '#ff6969',
+        'green-custom-light' : '#1bb194',
+        
       },
       
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-      }
-    }
+      },
+    },
   },
   plugins: [],
 }