diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8847718
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# odin-admin-dashboard
+
+A generic dashboard made using grid and flex
+
+This project uses [CSS Nesting](https://caniuse.com/?search=nesting)
+
+# Outcome
+![Outcome](image.png)
\ No newline at end of file
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..9d765f0
Binary files /dev/null and b/image.png differ
diff --git a/index.html b/index.html
index ddc670a..1ae57b6 100644
--- a/index.html
+++ b/index.html
@@ -11,21 +11,51 @@
 <body>
     <div id="container">
         <div id="sidebar">
-            <span id="title">
+            <div id="title" class="split">
                 <i class="fa-solid fa-house"></i>
                 <h1>Home</h1>
-            </span>
+            </div>
 
             <ul>
-                <li><i class="fa-solid fa-message"></i> Messages</li>
-                <li><i class="fa-solid fa-list-check"></i> Tasks</li>
-                <li><i class="fa-solid fa-person"></i> Profile</li>
-                <li><i class="fa-solid fa-timeline"></i> History</li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-message"></i>
+                        <span class="text">Messages</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-list-check"></i>
+                        <span class="text">Tasks</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-user"></i>
+                        <span class="text">Profile</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-timeline"></i>
+                        <span class="text">History</span>
+                    </div>
+                </li>
             </ul>
 
             <ul>
-                <li><i class="fa-solid fa-gear"></i> Settings</li>
-                <li><i class="fa-solid fa-circle-info"></i> Help</li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-gear"></i>
+                        <span class="text">Settings</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="split">
+                        <i class="fa-solid fa-circle-info"></i>
+                        <span class="text">Help</span>
+                    </div>
+                </li>
             </ul>
         </div>
         <div id="header">
@@ -35,11 +65,11 @@
             </div>
             <div id="profile">
                 <i class="fa-regular fa-bell"></i>
-                <img src="desired-result.png" alt="">
+                <img src="user.svg" alt="">
                 <span id="name">Tony Kowalski</span>
             </div>
             <div id="welcome">
-                <img src="desired-result.png" alt="">
+                <img src="user.svg" alt="">
                 <div id="text">
                     <span id="hi">Hi there,</span>
                     <span id="person">Tony Kowalski (@tkowal)</span>
@@ -124,28 +154,28 @@
             </div>
             <div id="trending">
                 <div class="trend">
-                    <img src="" alt="">
+                    <img src="user.svg" alt="">
                     <div id="text">
                         <h4>@account</h4>
                         <span id="description">Very cool account page</span>
                     </div>
                 </div>
                 <div class="trend">
-                    <img src="" alt="">
+                    <img src="user.svg" alt="">
                     <div id="text">
                         <h4>@account</h4>
                         <span id="description">Very cool account page</span>
                     </div>
                 </div>
                 <div class="trend">
-                    <img src="" alt="">
+                    <img src="user.svg" alt="">
                     <div id="text">
                         <h4>@account</h4>
                         <span id="description">Very cool account page</span>
                     </div>
                 </div>
                 <div class="trend">
-                    <img src="" alt="">
+                    <img src="user.svg" alt="">
                     <div id="text">
                         <h4>@account</h4>
                         <span id="description">Very cool account page</span>
diff --git a/style.css b/style.css
index 3c6c8f3..f10470a 100644
--- a/style.css
+++ b/style.css
@@ -21,11 +21,16 @@
         #title {
             font-size: 2.2rem;
             margin: 20px 0 0 20px;
-            display: inline-block;
             cursor: pointer;
             font-weight: bold;
-            h1 {
-                display: inline-block;
+            &.split {
+                display: flex;
+                gap: 10px;
+                i {
+                    flex: 0 0 50px;
+                    text-align: center;
+                    display: block;
+                }
             }
         }
         ul {
@@ -34,14 +39,23 @@
             font-weight: bold;
             i {
                 position: relative;
-                bottom: -1px;
+                /* bottom: -1px; */
                 display: inline-block;
-                margin-right: 10px;
+                /* margin-right: 10px; */
+            }
+            li {
+                margin: 25px 0;
+                cursor: pointer;
+                .split {
+                    display: flex;
+                    gap: 10px;
+                    i {
+                        flex: 0 0 50px;
+                        text-align: center;
+                        display: block;
+                    }
+                }
             }
-        }
-        ul li {
-            margin: 25px 0;
-            cursor: pointer;
         }
     }
     #header {
@@ -50,7 +64,8 @@
         z-index: 2;
         display: grid;
         grid-template: 2fr 3fr / 3fr 2fr;
-        padding: 0 40px;
+        padding: 10px 40px;
+        gap: 10px;
         & > *:nth-child(2n) {
             justify-self: end;
         }
@@ -77,6 +92,7 @@
         #profile {
             display: flex;
             /* align-items: center; */
+            width: 100%;
             gap: 28px;
             position: relative;
             align-items: center;
@@ -89,6 +105,8 @@
                 border-radius: 50%;
                 aspect-ratio: 1/1;
                 max-width: 50px;
+                border: 1px solid #454545;
+                filter: invert(0.5);
             }
             #name {
                 font-weight: bold;
@@ -98,11 +116,15 @@
             display: flex;
             gap: 12px;
             img {
-                max-height: 80px;
+                /* max-height: 100%; */
+                max-width: 68px;
+                align-self: stretch;
                 aspect-ratio: 1/1;
                 display: block;
-                max-width: 80px;
+                /* max-width: 70px; */
                 border-radius: 50%;
+                border: 1px solid #454545;
+                filter: invert(0.5);
             }
             #text {
                 display: flex;
@@ -142,15 +164,17 @@
     }
     #main {
         display: grid;
-        grid-template: 1fr 1fr / 5fr 2fr;
+        grid-template: 1fr 1fr / 6fr 2fr;
         grid-template-areas: "projects announcements"
                              "projects trending";
         background-color: #E2E7F1;
         grid-area: main;
+        gap: 20px;
+        padding: 30px 18px;
         #projects {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            grid-auto-rows: 200px;
+            grid-auto-rows: calc(auto-fill);
             gap: 18px;
             grid-area: projects;
             .project {
@@ -189,12 +213,13 @@
             border-radius: 12px;
             background-color: #fff;
             box-shadow: 3px 3px 6px -5px #000;
-            padding: 20px 15px 15px 18px;
+            padding: 15px 25px;
             flex-direction: column;
             height:100%;
             box-sizing: border-box;
+            justify-content: center;
             .announcement {
-                padding: 10px;
+                padding: 20px 10px;
                 h3 {
                     font-weight: bold;
                 }
@@ -213,12 +238,26 @@
             border-radius: 12px;
             background-color: #fff;
             box-shadow: 3px 3px 6px -5px #000;
-            padding: 20px 15px 15px 18px;
+            padding: 8px;
             flex-direction: column;
             height:100%;
             box-sizing: border-box;
+            justify-content: center;
             .trend {
                 padding: 10px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 10px;
+                img {
+                    max-height: 50px;
+                    aspect-ratio: 1/1;
+                    display: block;
+                    max-width: 50px;
+                    border-radius: 50%;
+                    border: 1px solid #454545;
+                    filter: invert(0.5);
+                }
                 #description {
                     color: #545454;
                 }
diff --git a/user.svg b/user.svg
new file mode 100644
index 0000000..30cbd7d
--- /dev/null
+++ b/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
\ No newline at end of file
