diff --git a/README.md b/README.md
index 8d6d630..a2700da 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Note: If you don't have `npm` installed, you'll need to do that first.
 
 ## Back end
 
-The polyzero backend was built uysing Google Firebase.
+The polyzero backend was built using Google Firebase.
 
 # OpenSource Contributions
 
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 67d878d..973fe53 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -10,7 +10,7 @@ const Header = ({
   return (
     <header className={`z-50 flex flex-col items-center md:items-start md:gap-6 ${className}`}>
       <h1
-        className={`flex flex-wrap items-center md:items-center md:justify-start my-6 text-3xl font-bold ${
+        className={`flex flex-wrap items-center justify-center md:items-center md:justify-start my-6 text-3xl font-bold ${
           darkBackground ? "text-slate-50" : "text-gray-800"
         } md:my-6 lg:my-4 dark:text-white md:text-5xl lg:text-5xl xl:text-6xl 2xl:text-8xl`}
       >
diff --git a/src/components/Registration.jsx b/src/components/Registration.jsx
index 0557a5f..0bb6b0a 100644
--- a/src/components/Registration.jsx
+++ b/src/components/Registration.jsx
@@ -71,15 +71,15 @@ function Registration() {
                   htmlFor="user1"
                   className="block mb-2 ml-1 text-sm font-medium text-gray-900 dark:text-white"
                 >
-                  Username
+                  Full Name
                 </label>
                 <input
                   id="user1"
                   type="text"
                   className="text-sm focus:shadow-soft-primary-outline leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 font-normal text-gray-700 transition-all focus:border-primary-600 focus:bg-white focus:text-gray-700 focus:outline-none focus:transition-shadow"
-                  placeholder="Username"
-                  aria-label="username"
-                  name="username"
+                  placeholder="Full Name"
+                  aria-label="name"
+                  name="name"
                   aria-describedby="email-addon"
                   aria-required
                   required
@@ -153,7 +153,7 @@ function Registration() {
               <div className="text-center">
                 <Button
                   type="submit"
-                  className="w-full px-6 py-3 mt-6 mb-2 text-sm font-bold text-center text-white transition-all ease-in bg-blue-600 border-0 rounded-lg shadow-md cursor-pointer active:opacity-85 hover:scale-102 hover:shadow-xs hover:border-blue-800 hover:bg-blue-800 hover:text-white"
+                  className="w-full px-6 py-3 mt-6 mb-2 text-sm font-bold text-center text-white capitalize transition-all ease-in bg-blue-600 border-0 rounded-lg shadow-md cursor-pointer active:opacity-85 hover:scale-102 hover:shadow-xs hover:border-blue-800 hover:bg-blue-800 hover:text-white"
                 >
                   Register
                 </Button>
diff --git a/src/components/SideBar.jsx b/src/components/SideBar.jsx
index 3548b18..e3da632 100644
--- a/src/components/SideBar.jsx
+++ b/src/components/SideBar.jsx
@@ -86,7 +86,13 @@ const SideBar = ({ storedTier, storedPayment, windowWidth }) => {
                         : "text-gray-600"
                     } flex items-center gap-4 text-sm  px-4 py-3 rounded-lg`}
                   >
-                    <Tiers className="w-8 text-green-600" />
+                    <Tiers
+                      className={`w-8 ${
+                        pathName === "/tiers"
+                          ? "text-slate-50"
+                          : "text-green-600"
+                      }`}
+                    />
                     Support Tiers
                   </NavLink>
                 </li>
@@ -102,7 +108,13 @@ const SideBar = ({ storedTier, storedPayment, windowWidth }) => {
                         : "text-gray-600"
                     } flex items-center gap-4 text-sm  px-4 py-3 rounded-lg`}
                   >
-                    <ShoppingCartIcon className="w-8 text-green-600" />
+                    <ShoppingCartIcon
+                      className={`w-8 ${
+                        pathName === "/payment"
+                          ? "text-slate-50"
+                          : "text-green-600"
+                      }`}
+                    />
                     Order Confirmation
                   </NavLink>
                 </li>
diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js
index 5686c20..568316c 100644
--- a/src/firebase/firebase.js
+++ b/src/firebase/firebase.js
@@ -162,22 +162,15 @@ const savePaymentData = async (data) => {
 
 const getStripeApi = async (data) => {
   try {
-    // const stripeCheckout =
-    //   window.location.hostname === "localhost"
-    //     ? httpsCallable(getFunctions(app), "stripeCheckoutDev")
-    //     : httpsCallable(getFunctions(app), "stripeCheckoutProd");
+    const stripeCheckout =
+      window.location.hostname === "localhost"
+        ? httpsCallable(getFunctions(app), "stripeCheckoutDev")
+        : httpsCallable(getFunctions(app), "stripeCheckoutProd");
 
-    // const STRIPE_PUBLIC_KEY =
-    //   window.location.hostname === "localhost"
-    //     ? "pk_test_51LhqIFAAHnMRTgmRLjs2aLphobC5OiVB6OhS2bXVAcoFuZJggH3uocLpU7cbwHOWs89wx33paIvgHeDEjcqiQaAs00dZO5xDtE"
-    //     : "pk_live_51LhqIFAAHnMRTgmRuENJXYhrcJKNprQWWzUbCqtGJ1Zwg6AGfzmoE5w0wCJV8GZ8k8rTF4HVzKHuBQw9yEzxOH4E00eCeL7tXl";
-
-    const stripeCheckout = httpsCallable(
-      getFunctions(app),
-      "stripeCheckoutDev"
-    );
     const STRIPE_PUBLIC_KEY =
-      "pk_test_51LhqIFAAHnMRTgmRLjs2aLphobC5OiVB6OhS2bXVAcoFuZJggH3uocLpU7cbwHOWs89wx33paIvgHeDEjcqiQaAs00dZO5xDtE";
+      window.location.hostname === "localhost"
+        ? "pk_test_51LhqIFAAHnMRTgmRLjs2aLphobC5OiVB6OhS2bXVAcoFuZJggH3uocLpU7cbwHOWs89wx33paIvgHeDEjcqiQaAs00dZO5xDtE"
+        : "pk_live_51LhqIFAAHnMRTgmRuENJXYhrcJKNprQWWzUbCqtGJ1Zwg6AGfzmoE5w0wCJV8GZ8k8rTF4HVzKHuBQw9yEzxOH4E00eCeL7tXl";
 
     const stripe = await loadStripe(STRIPE_PUBLIC_KEY);
     stripeCheckout(data).then((result) => {
diff --git a/src/pages/Results.jsx b/src/pages/Results.jsx
index b370536..b4fb92c 100644
--- a/src/pages/Results.jsx
+++ b/src/pages/Results.jsx
@@ -28,7 +28,7 @@ const Results = ({ result, setResult }) => {
   const [footprint, setFootprint] = useState(result);
 
   function rounder(number) {
-    return Number(number.toFixed(2));
+    return Number(number.toFixed(0));
   }
 
   useEffect(() => {
diff --git a/src/pages/Tiers.jsx b/src/pages/Tiers.jsx
index dce5a74..7ca38b4 100644
--- a/src/pages/Tiers.jsx
+++ b/src/pages/Tiers.jsx
@@ -14,25 +14,24 @@ const Tiers = ({ setTier }) => {
   }, []);
 
   return (
-    <div className="relative flex flex-col flex-grow gap-6 overflow-hidden lg:flex-row bg-slate-700 opacity-90 lg:items-center md:justify-center md:mt-0 lg:gap-0">
-      <div className="z-40 flex flex-col gap-4 my-8 md:text-start md:my-16 lg:my-0 lg:ml-24 lg:-mr-24 basis-1/2">
-        <div>
-          <Header
-            text="Offset your"
-            highlightedText="CO2 emissions"
-            caption={
-              "The most important step you can take is to reduce your plastic footprint. For those who wish to do more, you can offset the CO2 emissions originating from the plastic you use."
-            }
-            darkBackground={true}
-          />
-        </div>
+    <div className="relative flex flex-col flex-grow gap-6 pb-8 md:overflow-hidden lg:flex-row bg-slate-700 opacity-90 lg:items-center md:justify-center md:mt-0 lg:gap-0">
+      <div className="z-40 flex flex-col gap-4 my-8 md:text-start md:my-16 lg:my-0 lg:ml-24 lg:-mr-24 md:basis-1/2">
+        <Header
+          text="Offset your"
+          highlightedText="CO2 emissions"
+          caption={
+            "The most important step you can take is to reduce your plastic footprint. For those who wish to do more, you can offset the CO2 emissions originating from the plastic you use."
+          }
+          darkBackground={true}
+          className="md:items-center lg:items-start"
+        />
         <Link to={"/faq"}>
           <p className="font-bold text-center underline underline-offset-4 md:mt-8 lg:mt-0 lg:text-start text-emerald-500">
             Where your money goes
           </p>
         </Link>
       </div>
-      <section className="z-40 flex flex-col items-center h-screen gap-8 overflow-y-scroll snap-y md:px-16 lg:p-14 xl:p-32 basis-full md:gap-8 md:basis-full lg:basis-1/2">
+      <section className="z-40 flex flex-col items-center h-screen gap-8 overflow-y-scroll snap-y md:px-16 lg:p-14 xl:p-32 basis-full md:gap-8 md:basis-full lg:basis-3/4">
         {data &&
           tierCardData.map((tier) => {
             return (