diff --git a/src/components/signInComponent/signInComponent.js b/src/components/signInComponent/signInComponent.js
index f822fe3..c0457e5 100644
--- a/src/components/signInComponent/signInComponent.js
+++ b/src/components/signInComponent/signInComponent.js
@@ -2,7 +2,8 @@ import React, { useContext, useState } from "react";
 import { Context } from "../../Context";
 import { Form, Row, Col, Button } from "react-bootstrap";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
+import "./signinComponent.css";
 
 // test login
 // ray@gmail.com
@@ -47,7 +48,8 @@ export default function SignInComponent() {
     console.log("sub");
   };
   return (
-    <div>
+    <div className="sign-in-box">
+      <h1 className="sign-in-header">Wallet Zen</h1>
       <Form onSubmit={onformSubmit}>
         <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
           <Form.Label column sm="2">
@@ -72,6 +74,9 @@ export default function SignInComponent() {
           </Col>
         </Form.Group>
         <Button type="submit">Sign in</Button>
+        <Link to="/createUser">
+          <Button type="submit">Sign Up</Button>
+        </Link>
       </Form>
     </div>
   );
diff --git a/src/components/signInComponent/signinComponent.css b/src/components/signInComponent/signinComponent.css
new file mode 100644
index 0000000..618d83e
--- /dev/null
+++ b/src/components/signInComponent/signinComponent.css
@@ -0,0 +1,10 @@
+.sign-in-header {
+  text-align: center;
+}
+
+.sign-in-box {
+  width: 400px;
+  border: 1px solid green;
+  height: 400px;
+  margin: 0 auto;
+}
diff --git a/src/pages/budgetPage/BudgetPage.jsx b/src/pages/budgetPage/BudgetPage.jsx
index f9dec45..4d08c0f 100644
--- a/src/pages/budgetPage/BudgetPage.jsx
+++ b/src/pages/budgetPage/BudgetPage.jsx
@@ -9,9 +9,10 @@ export default function BudgetPage() {
   const { isLoggedIn, userData, budgetList } = useContext(Context);
   let navigate = useNavigate();
 
-  console.log("UserID",userData)
+  console.log("UserID", userData);
   const loginHandler = () => {
     if (isLoggedIn) {
+      navigate("/");
       window.location.reload();
     } else {
       navigate("/");
@@ -31,7 +32,7 @@ export default function BudgetPage() {
           <h1>Logo</h1>
         </div>
         <div className="right-side">
-          <h2>Welcome </h2>
+          <h2>Welcome {userData.firstame} </h2>
           <button onClick={loginHandler}>
             {isLoggedIn ? "Sign out" : "Sign in"}
           </button>
@@ -42,13 +43,15 @@ export default function BudgetPage() {
       <div className="budget">
         <h1>Budget</h1>
         {budgetList.map((budget, key) => {
-              return (
-                <Link to="/expense:id" key={key}>
-                  {budget}
-                </Link>
-              );
-            })}
-        <Link to="/newBudget"><button>Create new budget</button></Link>
+          return (
+            <Link to="/expense:id" key={key}>
+              {budget}
+            </Link>
+          );
+        })}
+        <Link to="/newBudget">
+          <button>Create new budget</button>
+        </Link>
       </div>
 
       <div className="expense-result">