diff --git a/Assets/home.png b/Assets/home.png
new file mode 100644
index 0000000..40e4028
Binary files /dev/null and b/Assets/home.png differ
diff --git a/Assets/leaderboard.png b/Assets/leaderboard.png
new file mode 100644
index 0000000..6e2be67
Binary files /dev/null and b/Assets/leaderboard.png differ
diff --git a/README.md b/README.md
index 98960d0..62c2454 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,24 @@
-# SwordManager
\ No newline at end of file
+# [Sword Manager](https://github.com/sk337/SwordManager)
+
+> **100% client sided Sword Battle account manager written in react**
+
+Use Now [here](https://sk337.github.io/SwordManager)
+
+## Run Locally
+
+1. Install Node js
+2. Clone the Repository
+3. Update Submodules `git submodule update --init` **Required**
+4. Install Dependencys with `npm install`
+5. Start server with `npm run dev`
+6. go to [localhost:5173](http://localhost:5173)
+
+## Contributing 
+
+Contributions are Greatly appreciated and can be done at [github.com](https://github.com/sk337/SwordManager)
+
+## contact
+
+* Github: [sk337](https://github.com/sk337)
+* Discord: @rf.to
+* Replit: [@1gn](https://replit.com/@1gn)
diff --git a/src/Profile.jsx b/src/Profile.jsx
index f880ab0..7587eeb 100644
--- a/src/Profile.jsx
+++ b/src/Profile.jsx
@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Nav from "@/components/nav";
 import { getPubInfo } from "@/utils/login";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Card,
   CardContent,
@@ -14,12 +10,15 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import cosmetics from "@/../cosmetics";
 
-import { dateParse } from "@/utils/jsutils";
+import { dateParse, prettyNum } from "@/utils/jsutils";
 
 export default function Profile() {
-  const urlData = new URL("https://"+window.location.hash.replace("#", "q/s"))
-  console.log(urlData)
+  const urlData = new URL(
+    "https://" + window.location.hash.replace("#", "q/"),
+  );
+  // console.log(urlData);
   if (!urlData.searchParams.get("user")) {
     return (
       <main>
@@ -43,15 +42,15 @@ export default function Profile() {
     fetchUser();
   }, []);
 
-
   if (user && !user.error) {
+    console.log(user);
     return (
       <main>
         <Nav />
         <div className="flex flex-col items-center">
           <div className="felx flex-row items-center justify-center p-5">
             <h1 className="text-3xl font-bold text-center">Profile</h1>
-            <Card>
+            <Card className="w-[400px]">
               <CardHeader>
                 <CardTitle>{user.account.username}</CardTitle>
               </CardHeader>
@@ -61,26 +60,28 @@ export default function Profile() {
                     <AvatarImage src={user.image} />
                     <AvatarFallback>AV</AvatarFallback>
                   </Avatar>
-                  <div className="space-y-2">
-                    <p>Joined: {dateParse(user.account.created_at)}</p>
-                    <p>XP: {user.account.xp}</p>
+                  <div>
+                    <p>
+                      <span className="text-sky-500">Joined:</span>{" "}
+                      {dateParse(user.account.created_at)}
+                    </p>
+                    <p>
+                      <span className="text-sky-500">XP:</span> {prettyNum(user.account.xp)}
+                    </p>
                   </div>
                 </div>
-                <p>Level: {user.account.level}</p>
+                <p><span className="text-sky-500">User Id: </span>{prettyNum(user.account.id)}<br/>{user.account.lastUsernameChange != null ? <span className="text-sky-500">Last Username change: <span className="text-white">{dateParse(user.account.lastUsernameChange)}<br/></span></span> :""}<span className="text-sky-500">Profile Views: </span>{prettyNum(user.account.profile_views)}</p>
               </CardContent>
               <CardFooter>
                 <p>More stats coming soon</p>
               </CardFooter>
             </Card>
-           
           </div>
         </div>
       </main>
     );
-  } else if(user.error){
-    return (
-      <p>not found</p>
-    )
+  } else if (user.error) {
+    return <p>not found</p>;
   } else {
     return (
       <main>
@@ -89,4 +90,4 @@ export default function Profile() {
       </main>
     );
   }
-}
\ No newline at end of file
+}