diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html
index eb0512c..1ed750d 100644
--- a/src/app/components/summary/summary.component.html
+++ b/src/app/components/summary/summary.component.html
@@ -1 +1,33 @@
-<p>summary works!</p>
+<section>
+  <div class="header">
+    <div class="title">Join 360</div>
+    <div class="blue-bar"></div>
+    <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>
+        <div class="details">
+          <span>1</span>
+          <p>To-do</p>
+        </div>
+      </div>
+      <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="right-frame">
+      <p>Good Morning,</p>
+      <span id="welcome-user">Guest</span>
+    </div>
+  </div>
+</section>
diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss
index e69de29..7423ad8 100644
--- a/src/app/components/summary/summary.component.scss
+++ b/src/app/components/summary/summary.component.scss
@@ -0,0 +1,110 @@
+.header {
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  height: 73px;
+  .title {
+    font-size: 61px;
+    font-weight: 700;
+    padding-right: 24px;
+  }
+  .metrics-txt {
+    font-size: 27px;
+    font-weight: 400;
+    padding-left: 24px;
+  }
+  .blue-bar {
+    height: 80%;
+    width: 3px;
+    background-color: var(--light-blue);
+  }
+}
+
+.content {
+  display: flex;
+  padding: 24px;
+}
+
+.right-frame {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 48px;
+  p {
+    font-size: 47px;
+    font-weight: 500;
+  }
+  span {
+    font-size: 64px;
+    font-weight: 700;
+    color: var(--light-blue);
+  }
+}
+
+.left-frame {
+  display: flex;
+  justify-content: space-between;
+  width: 560px;
+  height: 562px;
+  border: 2px solid #000;
+}
+
+.todo-done {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  width: 264px;
+  height: 168px;
+  border-radius: 30px;
+  background-color: var(--white);
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.05);
+    transition: 500ms ease-out;
+    background-color: var(--dark-blue);
+    .circle {
+      background-color: var(--white);
+      img {
+        filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(30deg)
+          brightness(104%) contrast(101%);
+      }
+    }
+    .details {
+      p {
+        color: var(--white);
+      }
+      span {
+        color: var(--white);
+      }
+    }
+  }
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  p {
+    font-size: 20px;
+    font-weight: 400;
+  }
+  span {
+    font-size: 64px;
+    font-weight: 700;
+  }
+}
+
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 69px;
+  width: 69px;
+  border-radius: 100%;
+  background-color: var(--dark-blue);
+  img {
+    height: 32px;
+    width: 32px;
+  }
+}
diff --git a/src/assets/fonts/inter/inter-v13-latin-700.woff2 b/src/assets/fonts/inter/inter-v13-latin-700.woff2
new file mode 100644
index 0000000..775f757
Binary files /dev/null and b/src/assets/fonts/inter/inter-v13-latin-700.woff2 differ
diff --git a/src/assets/img/summary/pencil.svg b/src/assets/img/summary/pencil.svg
new file mode 100644
index 0000000..b7fb624
--- /dev/null
+++ b/src/assets/img/summary/pencil.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.16667 22.3332H5.03333L16.5333 10.8332L14.6667 8.9665L3.16667 20.4665V22.3332ZM22.2333 8.89984L16.5667 3.29984L18.4333 1.43317C18.9444 0.922059 19.5722 0.666504 20.3167 0.666504C21.0611 0.666504 21.6889 0.922059 22.2 1.43317L24.0667 3.29984C24.5778 3.81095 24.8444 4.42761 24.8667 5.14984C24.8889 5.87206 24.6444 6.48873 24.1333 6.99984L22.2333 8.89984ZM20.3 10.8665L6.16667 24.9998H0.5V19.3332L14.6333 5.19984L20.3 10.8665Z" fill="white"/>
+</svg>
diff --git a/src/assets/img/summary/rake.svg b/src/assets/img/summary/rake.svg
new file mode 100644
index 0000000..9be6b73
--- /dev/null
+++ b/src/assets/img/summary/rake.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.02832 15.0001L15.2571 26.0662L33.9717 3.93408" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/summary/urgent.svg b/src/assets/img/summary/urgent.svg
new file mode 100644
index 0000000..c30cb8b
--- /dev/null
+++ b/src/assets/img/summary/urgent.svg
@@ -0,0 +1,12 @@
+<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="30.1445" cy="30.8083" r="30" fill="#FF3D00"/>
+<g clip-path="url(#clip0_62_690)">
+<path d="M45.0159 41.9714C44.6149 41.9721 44.2242 41.8425 43.9014 41.6018L29.7961 31.0719L15.6909 41.6018C15.4928 41.7499 15.2679 41.8571 15.029 41.9172C14.79 41.9774 14.5417 41.9893 14.2981 41.9524C14.0546 41.9154 13.8207 41.8302 13.6097 41.7018C13.3987 41.5733 13.2147 41.4041 13.0684 41.2037C12.922 41.0033 12.8161 40.7757 12.7566 40.5339C12.6972 40.2921 12.6854 40.0408 12.7219 39.7944C12.7957 39.2967 13.0618 38.849 13.4617 38.5499L28.6816 27.1765C29.0041 26.9349 29.3948 26.8044 29.7961 26.8044C30.1974 26.8044 30.5881 26.9349 30.9107 27.1765L46.1305 38.5499C46.4483 38.7869 46.684 39.1194 46.8039 39.5001C46.9238 39.8807 46.9218 40.2899 46.7982 40.6693C46.6746 41.0487 46.4357 41.3789 46.1157 41.6127C45.7956 41.8466 45.4107 41.9721 45.0159 41.9714Z" fill="white"/>
+<path d="M45.0159 32.0195C44.6149 32.0202 44.2242 31.8906 43.9014 31.6499L29.7961 21.12L15.6909 31.6499C15.2909 31.949 14.79 32.0751 14.2981 32.0004C13.8063 31.9258 13.364 31.6565 13.0684 31.2518C12.7728 30.8471 12.6482 30.3401 12.7219 29.8425C12.7957 29.3448 13.0618 28.8971 13.4617 28.598L28.6816 17.2246C29.0041 16.983 29.3948 16.8525 29.7961 16.8525C30.1974 16.8525 30.5881 16.983 30.9107 17.2246L46.1305 28.598C46.4483 28.835 46.684 29.1675 46.8039 29.5482C46.9238 29.9288 46.9218 30.338 46.7982 30.7174C46.6746 31.0968 46.4357 31.427 46.1157 31.6608C45.7956 31.8947 45.4107 32.0202 45.0159 32.0195Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_62_690">
+<rect width="34.186" height="25.1163" fill="white" transform="translate(12.7031 16.855)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/styles.scss b/src/styles.scss
index 63388e6..6ef936e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,6 +12,7 @@
   --gray: #a8a8a8;
   --light-gray: #cdcdcd;
   --light-blue: #29abe2;
+  --dark-blue: #2b3647;
   --very-dark-blue: #091931;
   --very-light-gray: #f6f7f8;
 }
@@ -57,6 +58,14 @@
   font-weight: 600;
   src: url("./assets/fonts/inter/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+/* inter-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: url("./assets/fonts/inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
 /* inter-800 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */