diff --git a/public/BudgetBuddyIcon.ico b/public/BudgetBuddyIcon.ico
new file mode 100644
index 0000000..8bf7032
Binary files /dev/null and b/public/BudgetBuddyIcon.ico differ
diff --git a/public/BudgetBuddyLogo.ico b/public/BudgetBuddyLogo.ico
deleted file mode 100644
index 128e490..0000000
Binary files a/public/BudgetBuddyLogo.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 824772b..b7bdef0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/BudgetBuddyLogo.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/BudgetBuddyIcon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
diff --git a/src/assets/BudgetBuddyLogoWhite.png b/src/assets/BudgetBuddyLogoWhite.png
new file mode 100644
index 0000000..6aa094c
Binary files /dev/null and b/src/assets/BudgetBuddyLogoWhite.png differ
diff --git a/src/components/AddExpenseForm.js b/src/components/AddExpenseForm.js
index ee1d2a8..ba3241b 100644
--- a/src/components/AddExpenseForm.js
+++ b/src/components/AddExpenseForm.js
@@ -126,8 +126,9 @@ const AddExpenseForm = (props) => {
 	return (
 		<div className='widget'>
 			<h4>Add Transaction</h4>
+			<div style={{height: "85%"}} className='d-flex flex-column justify-content-between'>
 				<div className='row'>
-					<div className='col-md col-lg-4'>
+					<div className='col'>
 						<label htmlFor='cost'>Cost</label>
 						<input
 							required='required'
@@ -140,7 +141,7 @@ const AddExpenseForm = (props) => {
 							onChange={(event) => setCost(event.target.value)}
 						/>
 					</div>
-					<div className='col-md col-lg-4'>
+					<div className='col'>
 						<label htmlFor='category-select'>Category</label>
 						<select className="form-select" id='category-select'
 							value={category} 
@@ -154,9 +155,9 @@ const AddExpenseForm = (props) => {
 						</select>
 					</div>
 				</div>
-
-				<div className='row mt-2'>
-					<div className='col'>
+				
+				<div className='row'>
+					<div className='btn-group mt-2' role="group">
 						<button className='btn btn-outline-success m-right' value={1} onClick={quickSet}>
 							$1
 						</button>
@@ -178,20 +179,20 @@ const AddExpenseForm = (props) => {
 					</div>
 				</div>
 
-				<div className='row mt-2'>
+				<div className='row'>
 					<div className='col-sm'>
-						<button className='btn btn-dark m-right' onClick={toggleTransactionType}>
+						<button className='btn btn-dark m-right  mt-2' onClick={toggleTransactionType}>
 							{transactionType.toUpperCase()}
 						</button>
-						<button type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary m-right'>
-							Add {transactionType.substring(0, 1).toUpperCase() + transactionType.substring(1)}
+						<button type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary m-right mt-2'>
+							Add Transaction
 						</button>
-						<button className='btn btn-primary' onClick={handleAddCategory}>
+						<button className='btn btn-primary  mt-2' onClick={handleAddCategory}>
 							Add New Category
 						</button>
 					</div>
 				</div>
-
+			</div>
 		</div>
 	);
 };
diff --git a/src/components/FormInputGroup.js b/src/components/FormInputGroup.js
index 35f87db..18deb98 100644
--- a/src/components/FormInputGroup.js
+++ b/src/components/FormInputGroup.js
@@ -2,7 +2,7 @@ import React from "react";
 
 const FormInputGroup = ({text, placeholder, value, onInput}) => {
     return (
-        <div className="input-group mb-4">
+        <div className="input-group mt-3">
             <label className="input-group-text">{text}</label>
             <input type="number" className="form-control" placeholder={placeholder} value={value} onInput={onInput} />
         </div>
diff --git a/src/components/LoanCalculator.js b/src/components/LoanCalculator.js
index 7e54ab2..4215074 100644
--- a/src/components/LoanCalculator.js
+++ b/src/components/LoanCalculator.js
@@ -26,13 +26,13 @@ const LoanCalculator = () => {
 
     return (
         <div className="widget">
-            <h4 className="mb-5">Loan Calculator</h4>
+            <h4 className="mb-0">Loan Calculator</h4>
 
             <form onSubmit={(event) => event.preventDefault()}>
                 <FormInputGroup text="Loan Amount $" placeholder="" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
                 <FormInputGroup text="Interest Rate %" placeholder="" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
                 <FormInputGroup text="Loan Duration in Years" placeholder="" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
-                
+
                 <h4 className="alert alert-info fw-bold">
                     Monthly Payment: ${monthlyPayment.toFixed(2)}
                     <h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
@@ -44,4 +44,4 @@ const LoanCalculator = () => {
     )
 };
 
-export default LoanCalculator;
\ No newline at end of file
+export default LoanCalculator;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 9d1fc9f..36f9c59 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -22,7 +22,7 @@ export default function NavBar() {
     }, []);
 
     return (
-        <Toolbar position="sticky" className="navbar bar py-3 px-4">
+        <Toolbar position="sticky" className="navbar mb-2 py-3 px-4">
             <Link href="/" className="nav-brand" underline="none">
                 <img src={logo} className="logo w-100"/>
                 <Typography 
diff --git a/src/components/Remaining.js b/src/components/Remaining.js
index 0e263c7..bb884df 100644
--- a/src/components/Remaining.js
+++ b/src/components/Remaining.js
@@ -103,7 +103,7 @@ export default function Remaining() {
 		});
 	  }
 	return (
-		<>
+		<div className='widget d-flex align-items-center justify-content-between'>
 			{/* <img src={logo}></img> 
 			<span>Current Balance: ${data}</span> */}
 			{/* <button onClick={apiGet()}> TEST</button> */}
@@ -121,7 +121,7 @@ export default function Remaining() {
 					 required />
       			<button type="submit">Submit</button>
     		</form>
-		</>
+		</div>
 		
 	);
 };
\ No newline at end of file
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 33401d0..dd8f9d2 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -19,36 +19,36 @@ export default function Dashboard() {
 
   	return (
 		<AppProvider>
-			<div className='container-fluid'>
+			<div>
 				<div className='row align-items-stretch'>
-					<div className='col-sm'>
+					<div className='col mb-3'>
 						<FetchAPI />
 					</div>
-					<div className='col-sm widget d-flex align-items-center justify-content-between'>
+					<div className='col mb-3'>
 						<RemainingBudget />
 					</div>
-					<div className='col-sm widget d-flex align-items-center justify-content-between'>
+					<div className='col mb-3'>
 						<ExpenseTotal />
 					</div>
 				</div>
 
-				<div className='row mt-3'>
-					<div className='col'>
+				<div className='row'>
+					<div className='col-12 col-xl-4 mb-3'>
 						<AddExpenseForm/>
 					</div>
-					<div className='col'>
-						<ExpenseList />
+					<div className='col-12 col-xl-8 mb-3'>
+						<LoanCalculator/>
 					</div>
 				</div>
 
-				<div className='row mt-3'>
-					<div className='col-12 col-md-12 col-lg-4'>
-						<LoanCalculator/>
+				<div className='row'>
+					<div className='col-12 col-md-12 col-lg-4 mb-3'>
+						<ExpenseList />
 					</div>
-					<div className='col-12 col-lg-4'>
+					<div className='col-12 col-lg-4 mb-3'>
 						<CategorizedExpenses/>
 					</div>
-					<div className='col-12 col-lg-4'>
+					<div className='col-12 col-lg-4 mb-3'>
 						<CategorizedIncome/>
 					</div>
 				</div>
diff --git a/src/styles.css b/src/styles.css
index d6107a7..2aaffd0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #EFEFE6 !important;
 }
 
 code {
@@ -13,7 +14,6 @@ code {
 }
 
 .app {
-  background-color: #EFEFE6;
   color: #191910;
   min-height: 100vh;
 }
