diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html
index 1ed750d..657b15f 100644
--- a/src/app/components/summary/summary.component.html
+++ b/src/app/components/summary/summary.component.html
@@ -5,27 +5,72 @@
     <div class="metrics-txt">Key Metrics at a Glance</div>
   </div>
   <div class="content">
-    <div class="left-frame">
-      <div class="todo-done">
-        <div class="circle">
-          <img src="./../../../assets/img/summary/pencil.svg" alt="" />
+    <div class="left-container">
+      <!-- TOP -->
+      <div class="top-frame">
+        <div class="todo-done">
+          <div class="circle">
+            <img src="./../../../assets/img/summary/pencil.svg" alt="" />
+          </div>
+          <div class="details">
+            <span>1</span>
+            <p>To-do</p>
+          </div>
         </div>
-        <div class="details">
-          <span>1</span>
-          <p>To-do</p>
+        <div class="todo-done">
+          <div class="circle">
+            <img src="./../../../assets/img/summary/rake.svg" alt="" />
+          </div>
+          <div class="details">
+            <span>1</span>
+            <p>Done</p>
+          </div>
         </div>
       </div>
-      <div class="todo-done">
-        <div class="circle">
-          <img src="./../../../assets/img/summary/rake.svg" alt="" />
+      <!-- MIDDLE -->
+      <div class="middle-frame">
+        <div class="urgent">
+          <div class="left">
+            <img src="./../../../assets/img/summary/urgent.svg" alt="" />
+            <div class="details">
+              <span>1</span>
+              <p>Done</p>
+            </div>
+          </div>
+          <div class="line"></div>
+          <div class="right">
+            <div class="date">
+              <div>
+                <span>October 16, 2022</span>
+                <p>Upcoming Deadline</p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="details">
-          <span>1</span>
-          <p>Done</p>
+      </div>
+      <!-- BOTTOM -->
+      <div class="bottom-frame">
+        <div class="tasks">
+          <div class="details">
+            <span>5</span>
+            <p>Task in Board</p>
+          </div>
+        </div>
+        <div class="tasks">
+          <div class="details">
+            <span>2</span>
+            <p>Task in Progress</p>
+          </div>
+        </div>
+        <div class="tasks">
+          <div class="details">
+            <span>2</span>
+            <p>Awaiting Feedback</p>
+          </div>
         </div>
       </div>
     </div>
-    <div class="right-frame">
+    <div class="right-container">
       <p>Good Morning,</p>
       <span id="welcome-user">Guest</span>
     </div>
diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss
index 7423ad8..e1c184e 100644
--- a/src/app/components/summary/summary.component.scss
+++ b/src/app/components/summary/summary.component.scss
@@ -25,7 +25,7 @@
   padding: 24px;
 }
 
-.right-frame {
+.right-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -41,15 +41,23 @@
   }
 }
 
-.left-frame {
+.left-container {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   width: 560px;
   height: 562px;
-  border: 2px solid #000;
 }
 
-.todo-done {
+.top-frame,
+.bottom-frame {
+  display: flex;
+  justify-content: space-between;
+}
+
+.todo-done,
+.urgent,
+.tasks {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,24 +78,46 @@
           brightness(104%) contrast(101%);
       }
     }
-    .details {
-      p {
-        color: var(--white);
-      }
-      span {
-        color: var(--white);
-      }
+    p {
+      color: var(--white);
+    }
+    span {
+      color: var(--white);
     }
   }
 }
 
+.urgent {
+  width: 560px;
+  .right {
+    width: 40%;
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+    width: 40%;
+  }
+  img {
+    height: 69px;
+    width: 69px;
+  }
+}
+
+.tasks {
+  width: 168px;
+}
+
 .details {
   display: flex;
   flex-direction: column;
   align-items: center;
   p {
+    padding: 0 24px;
     font-size: 20px;
     font-weight: 400;
+    text-align: center;
   }
   span {
     font-size: 64px;
@@ -108,3 +138,22 @@
     width: 32px;
   }
 }
+
+.date {
+  display: flex;
+  justify-content: center;
+  p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+  span {
+    font-size: 21px;
+    font-weight: 700;
+  }
+}
+
+.line {
+  height: 100px;
+  width: 2px;
+  background-color: var(--gray);
+}