diff --git a/sql-fetch/characters.go b/sql-fetch/characters.go
index 16f7603..fc645cd 100644
--- a/sql-fetch/characters.go
+++ b/sql-fetch/characters.go
@@ -3,6 +3,7 @@ package sqlFetch
 import (
 	"encoding/json"
 	"fmt"
+	"time"
 )
 
 type Character struct {
@@ -13,6 +14,7 @@ type Character struct {
 	Gang Gang
 	Vehicles []Vehicle
 	MDTData MDTData
+	Age int
 }
 
 type CharInfo struct {
@@ -56,7 +58,23 @@ type Gang struct {
 	IsBoss bool `json:"isboss"`
 }
 
+func CalculateAge(birthdayString string) (int, error) {
+	birthday, err := time.Parse("01/02/2006", birthdayString)
+	if err != nil {
+		return 0, err
+	}
 
+	currentDate := time.Now()
+	// Calculate the difference in years
+	age := currentDate.Year() - birthday.Year()
+
+	// Check if the birthday for this year has occurred or not
+	if currentDate.YearDay() < birthday.YearDay() {
+		age--
+	}
+
+	return age, nil
+}
 
 func allCharacters() ([]Character, error) {
 
@@ -100,6 +118,11 @@ func allCharacters() ([]Character, error) {
 			character.Gang.Label = "None"
 		}
 
+		character.Age, err = CalculateAge(character.CharInfo.Birthday)
+		if err != nil {
+			fmt.Println("Error:", err)
+		}
+
         characters = append(characters, character)
     }
     if err := rows.Err(); err != nil {
diff --git a/static/css/styles.css b/static/css/styles.css
index c31ee9b..3076e11 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -12,6 +12,24 @@ body {
     padding: 0;
     margin: 0;
 }
+
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
 /* outer */
 #list-filter { 
     background-color: var(--secondary-bg-color);
@@ -197,4 +215,40 @@ body {
 
 #cid>h3 {
     margin: 0;
+}
+
+.profile-vehicle-list > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    margin-top: 2.5px;
+}
+
+.profile-vehicle-list > ul > li {
+    border: var(--accent-color) 3px solid;
+    border-radius: 10px;
+    background-color: var(--secondary-bg-color);
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.veh-name {
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: bolder;
+}
+
+.veh-info {
+    text-align: right;
+}
+
+.veh-info>span {
+    border-radius: 10px;
+    background-color: var(--accent-color);
+    padding: 3px;
+    margin-left: 5px;
+    text-wrap: nowrap;
 }
\ No newline at end of file
diff --git a/templates/character.html b/templates/character.html
index 33b6c65..de0d5e7 100644
--- a/templates/character.html
+++ b/templates/character.html
@@ -22,8 +22,8 @@ <h3>{{.CitizenID}}</h3>
                             <span>Phone Number:</span>
                         </div>
                         <div>
-                            <span id="age">age</span><br>
-                            <span id="gender">{{.CharInfo.Gender}}</span><br>
+                            <span id="age">{{.Age}} y/o</span><br>
+                            <span id="gender">{{if .CharInfo.Gender}}Female{{else}}Male{{end}}</span><br>
                             <div id="phone-number"><span>{{.CharInfo.PhoneNumber}}</span></div>
                         </div>
                     </div>