diff --git a/database.db b/database.db
index 412457a..1b7db45 100644
Binary files a/database.db and b/database.db differ
diff --git a/src/app/Components/BankAccountsView.tsx b/src/app/Components/BankAccountsView.tsx
index 642832d..556bcb0 100644
--- a/src/app/Components/BankAccountsView.tsx
+++ b/src/app/Components/BankAccountsView.tsx
@@ -9,8 +9,8 @@ const BankAccountsView = (props: {
 }) => {
   return (
     <div className="p-4">
-      <div className="grid grid-cols-5 gap-8">
-        <div className="bg-green-800 rounded-lg p-3">
+      <div className="flex gap-8">
+        <div className="flex-1 bg-green-800 rounded-lg p-3">
           <div className="text-white">
             <span className="text-green-400">Moonbucks</span>
             <h3 className="text-2xl font-bold">$5,342.23</h3>
diff --git a/src/app/Components/ResourceAccount.tsx b/src/app/Components/ResourceAccount.tsx
new file mode 100644
index 0000000..00d6260
--- /dev/null
+++ b/src/app/Components/ResourceAccount.tsx
@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { IResourceAccount } from "typings";
+import { resourceToBg, resourceToFc } from "../../utils/helpers";
+
+const ResourceAccount = (props: { account: IResourceAccount }) => {
+  return (
+    <div
+      className={
+        resourceToBg(props.account.resourceType) +
+        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex-1"
+      }
+    >
+      <div className="text-white">
+        <span
+          className={resourceToFc(props.account.resourceType) + " font-bold"}
+        >
+          {props.account.resourceType}
+        </span>
+        <h3 className="text-2xl font-bold">
+          {props.account.balance.toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}{" "}
+          kg
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+export default ResourceAccount;
diff --git a/src/app/Components/ResourceStore.tsx b/src/app/Components/ResourceStore.tsx
index d662c37..31d5ac4 100644
--- a/src/app/Components/ResourceStore.tsx
+++ b/src/app/Components/ResourceStore.tsx
@@ -1,61 +1,57 @@
 import React, { useState, useEffect } from "react";
-import ResourceItem from "./ResourceItem";
 import ResourceStoreItem from "./ResourceStoreItem";
 import { sumValues } from "../../utils/helpers";
-import {
-  IBankAccount,
-  IConversionPair,
-  IClaimableResource,
-  IResourceType,
-} from "typings";
+import { IBankAccount, IConversionPair } from "typings";
 
 const ResourceStore = (props: {
-  bankAccounts: IBankAccount[];
+  bankAccount: IBankAccount | undefined;
   setLightBoxIsActive: () => void;
 }) => {
   const [conversionRate, setConversionRate] = useState<Number>(0.1);
-  const [amount, setAmount] = useState<IClaimableResource[]>([]);
   const [conversionPairs, setConversionPairs] = useState<
     IConversionPair[] | null
   >(null);
 
   useEffect(() => {
-    const pairs = amount.map((n) => ({
-      resourceType: n.resourceType,
-      resourceAmount: n.balance,
-      moneyAmount: n.balance * conversionRate.valueOf(),
-    }));
-    setConversionPairs(pairs);
-  }, [amount]);
+    if (props.bankAccount) {
+      const pairs = props.bankAccount.resourceAccounts.map((resource) => ({
+        resourceType: resource.resourceType,
+        resourceAmount: 0,
+        moneyAmount: 0,
+      }));
+      setConversionPairs(pairs);
+    }
+  }, []);
 
   const handleAmountChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    resourceType: IResourceType
+    resourceType: string
   ) => {
-    const existingObj = amount.find(
-      (obj) => obj.resourceType.name === resourceType.name
+    if (!conversionPairs) return;
+
+    const existingObj = conversionPairs.find(
+      (obj) => obj.resourceType === resourceType
     );
 
-    if (existingObj) {
-      setAmount(
-        amount.map((obj) =>
-          obj.resourceType.name === resourceType.name
-            ? { resourceType: resourceType, balance: Number(e.target.value) }
-            : obj
-        )
-      );
-    } else {
-      setAmount([
-        ...amount,
-        { resourceType: resourceType, balance: Number(e.target.value) },
-      ]);
-    }
+    const updatedPairs = conversionPairs.map((pair) => {
+      if (pair.resourceType === existingObj?.resourceType) {
+        return {
+          ...pair,
+          resourceAmount: Number(e.target.value),
+          moneyAmount: Number(e.target.value) * conversionRate.valueOf(),
+        };
+      } else {
+        return pair;
+      }
+    });
+    setConversionPairs(updatedPairs);
   };
 
-  const getConversionPair = (name: string) => {
-    return conversionPairs?.find((obj) => obj.resourceType.name === name);
+  const getConversionPair = (resourceType: string) => {
+    return conversionPairs?.find((obj) => obj.resourceType === resourceType);
   };
 
+  console.log(conversionPairs);
   return (
     <div className="p-4 max-w-5xl">
       <h1 className="text-white text-4xl font-extrabold">
@@ -63,19 +59,20 @@ const ResourceStore = (props: {
       </h1>
       <div className="flex gap-4 mt-4">
         <div className="flex-1">
-          {props.bankAccounts.map((bankAccount) => (
-            <div className="flex mb-4 gap-4">
-              <div className="flex-1">
-                <ResourceStoreItem
-                  bankAccount={bankAccount}
-                  conversionPair={getConversionPair(
-                    bankAccount.resourceType.name
-                  )}
-                  handleAmountChange={handleAmountChange}
-                />
+          {props.bankAccount &&
+            props.bankAccount.resourceAccounts.map((resourceAccount) => (
+              <div className="flex mb-4 gap-4">
+                <div className="flex-1">
+                  <ResourceStoreItem
+                    resourceAccount={resourceAccount}
+                    conversionPair={getConversionPair(
+                      resourceAccount.resourceType
+                    )}
+                    handleAmountChange={handleAmountChange}
+                  />
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
 
           {conversionPairs && (
             <div className="">
@@ -92,13 +89,6 @@ const ResourceStore = (props: {
                   }
                 )}
               </p>
-              {/* <ResourceItem
-                name="MoonBucks"
-                bgColor="bg-green-800"
-                fontColor="text-green-400"
-                amount={sumValues(conversionPairs, "moneyAmount")}
-                unit="$"
-              /> */}
               <button className="bg-slate-100 py-2 text-slate-900 rounded-lg font-bold w-28 text-center">
                 Sell Now
               </button>
diff --git a/src/app/Components/ResourceStoreItem.tsx b/src/app/Components/ResourceStoreItem.tsx
index 946ac05..dbdebe5 100644
--- a/src/app/Components/ResourceStoreItem.tsx
+++ b/src/app/Components/ResourceStoreItem.tsx
@@ -1,33 +1,33 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { IBankAccount, IConversionPair } from "typings";
-import { IResourceType } from "typings";
+import { IResourceAccount, IConversionPair } from "typings";
+import { resourceToBg, resourceToFc } from "../../utils/helpers";
 
 const ResourceStoreItem = (props: {
-  bankAccount: IBankAccount;
+  resourceAccount: IResourceAccount;
   conversionPair: IConversionPair | undefined;
   handleAmountChange: (
     e: React.ChangeEvent<HTMLInputElement>,
-    resourceType: IResourceType
+    resourceType: string
   ) => void;
 }) => {
   return (
     <div
       className={
-        props.bankAccount.resourceType.bgColorClass +
+        resourceToBg(props.resourceAccount.resourceType) +
         " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex flex-row"
       }
     >
       <div className="text-white mr-4 flex-none">
         <span
           className={
-            props.bankAccount.resourceType.fontColorClass + " font-bold"
+            resourceToFc(props.resourceAccount.resourceType) + " font-bold"
           }
         >
-          {props.bankAccount.resourceType.name}
+          {props.resourceAccount.resourceType}
         </span>
         <h3 className="text-2xl font-bold">
-          {props.bankAccount.balance.toLocaleString("en-US", {
+          {props.resourceAccount.balance.toLocaleString("en-US", {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           })}{" "}
@@ -40,11 +40,11 @@ const ResourceStoreItem = (props: {
             <span>
               <span
                 className={
-                  props.conversionPair.resourceType.fontColorClass +
+                  resourceToFc(props.resourceAccount.resourceType) +
                   " font-bold"
                 }
               >
-                {props.conversionPair.resourceType.name}
+                {props.conversionPair.resourceType}
               </span>
               <h3 className="text-2xl font-bold">
                 {props.conversionPair.resourceAmount.toLocaleString("en-US", {
@@ -72,7 +72,7 @@ const ResourceStoreItem = (props: {
             <span>
               <span
                 className={
-                  props.conversionPair.resourceType.fontColorClass +
+                  resourceToFc(props.resourceAccount.resourceType) +
                   " font-bold"
                 }
               >
@@ -96,7 +96,7 @@ const ResourceStoreItem = (props: {
         className="bg-white px-4 py-2 mr-4 rounded-lg flex-none"
         placeholder="0"
         onChange={(e) =>
-          props.handleAmountChange(e, props.bankAccount.resourceType)
+          props.handleAmountChange(e, props.resourceAccount.resourceType)
         }
       />
     </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2a5c0be..07060b0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -198,6 +198,12 @@ export default function Home() {
     setLightBoxIsActive(!lightBoxIsActive);
   };
 
+  const handleCloseError = () => {
+    setError(null);
+  };
+
+  if (!userId) return <p>Please login</p>;
+
   return (
     <>
       <BankAccountsView
@@ -206,7 +212,7 @@ export default function Home() {
       />
       {lightBoxIsActive && (
         <ResourceStore
-          bankAccounts={bankAccounts}
+          bankAccount={bankAccount}
           setLightBoxIsActive={handleSetLightBox}
         />
       )}
diff --git a/typings.d.ts b/typings.d.ts
index 672ba0e..19f13fd 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -3,11 +3,10 @@ export type User = {
   inventoryItems: IInventoryItem[];
 };
 
-export interface IResourceType {
-  id: number;
-  name: string;
-  fontColorClass: string;
-  bgColorClass: string;
+export interface TimeDuration {
+  hours: number;
+  minutes: number;
+  seconds: number;
 }
 
 export interface IResourceWell {
@@ -54,7 +53,7 @@ export interface IClaimableResource {
 }
 
 export interface IConversionPair {
-  resourceType: IResourceType;
+  resourceType: string;
   resourceAmount: number;
   moneyAmount: number
 }