diff --git a/package.json b/package.json
index 365a92b..e997c70 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@pieces.app/pieces-os-client": "^2.0.0-2",
+    "@pieces.app/pieces-os-client": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
diff --git a/src/app/App.tsx b/src/app/App.tsx
index df7f356..00bbf34 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -44,6 +44,8 @@ export function App(): React.JSX.Element {
   const [selectedIndex, setSelectedIndex] = useState<number>(-1);
   const [error, setError] = useState(null);
 
+  const [userName, setUserName] = useState(null);
+
   const [isLoggedIn, setIsLoggedIn] = useState(false); // State to track login status
 
 
@@ -51,14 +53,17 @@ export function App(): React.JSX.Element {
   const loginUser = async () => {
     try {
       // Call the signIntoOS() method to initiate the login process
-      await osApi.signIntoOS();
+      const userDetails = await osApi.signIntoOS();
+      setUserName(userDetails.name);
       setIsLoggedIn(true); // Update login status
+
     } catch (error) {
       console.error("Error logging in:", error);
       // Handle login error
     }
   };
 
+
   // Function to handle user logout
   const logoutUser = async () => {
     try {
@@ -209,12 +214,25 @@ export function App(): React.JSX.Element {
 
   return (
     <>
-    { isLoggedIn ? (
-          <div className="container">
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <h1 style={{ textAlign: "left" }}>Welcome to Your own Copilot</h1>
-              <button  className="logoutBtn" onClick={logoutUser}>Logout</button>
-            </div>
+    {isLoggedIn && userName ? (
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <h1 style={{ textAlign: "left" }}>Welcome to Your own Copilot, {userName}</h1>
+    <button className="logoutBtn " onClick={logoutUser}>Logout</button>
+  </div>
+) : (
+  <div style={{ display: "flex", justifyContent: "space-between" }}>
+    <h2 style={{ textAlign: "left" }}>Please Login to use Pieces Copilot</h2>
+    <button
+      className="loginBtn "
+      onClick={loginUser}
+    >
+      Login
+    </button>
+  </div>
+)}
+
+
+      <div className="container">
       <Header isConnected={ !error} />
       {error && <div className="error-container"> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
         <div className="flex-container">
@@ -279,17 +297,6 @@ export function App(): React.JSX.Element {
         <CopilotChat />
         </div>
       </div>
-      ):(
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <h1 style={{ textAlign: "left" }}>Please Login to use Pieces Copilot</h1>
-          <button
-            className="loginBtn"
-            onClick={loginUser}
-          >
-            Login
-          </button>
-        </div>
-      )}
     </>
   );
 }
diff --git a/src/app/global.css b/src/app/global.css
index 02331ce..13b5b45 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -1,11 +1,11 @@
 /* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> */
 .loginBtn {
-  font-size: large;
+  font-size: medium;
   color: white;
   height: 48px; /* Adjust height as needed */
   border-radius: 10px;
   border: none;
-  padding: 0 40px;
+  padding: 6px 12px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,12 +14,12 @@
   background-color: green;
 }
 .logoutBtn {
-  font-size: large;
+  font-size: medium;
   color: white;
   height: 48px; /* Adjust height as needed */
   border-radius: 10px;
   border: none;
-  padding: 0 40px;
+  padding:  6px 12px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,6 +28,8 @@
   background-color: red;
 }
 
+
+
 html {
   font-family: "Roboto", sans-serif;
 }