diff --git a/src/dashboard.css b/src/dashboard.css
new file mode 100644
index 0000000..ed2700d
--- /dev/null
+++ b/src/dashboard.css
@@ -0,0 +1,392 @@
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgb(209, 209, 209);
+}
+
+.dashboard .dashboard-Wrap {
+  width: 769px;
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  border: solid white 2px;
+  border-radius: 17px 17px 0 0;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-align: center;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+  background-color: aliceblue;
+  border-radius: 15px 15px 0 0;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left {
+  padding: 0;
+  margin: 0;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left .dashboard-Top-Left-Text-1 {
+  padding: 0;
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+  font-size: 1.2rem;
+  color: rgb(34, 34, 34);
+  margin: 5px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid {
+  padding: 0;
+  margin: 0;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-1,
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
+  padding: 0;
+  margin: 0;
+  font-size: 1.2rem;
+  color: rgb(34, 34, 34);
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
+  color: gray;
+  font-size: 0.8rem;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  text-align: start;
+  align-items: start;
+  justify-content: start;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right .dashboard-Top-Right-Text-1 {
+  padding: 0;
+  font-size: 1.2rem;
+  color: rgb(34, 34, 34);
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+  margin: 5px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid {
+  height: 75%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left {
+  height: 100%;
+  width: 65%;
+  display: flex;
+  border-radius: 0 15px 15px 0;
+  overflow: hidden;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+  align-items: start;
+  overflow-y: auto;
+  overflow-x: hidden;
+  gap: 1px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: aliceblue;
+  border: solid rgba(175, 175, 175, 0.678) 1px;
+  border-left: none;
+  border-top: none;
+  border-right: none;
+  padding: 1px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right {
+  height: 100%;
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: space-evenly;
+  background-color: aliceblue;
+  border-radius: 15px 0 0 15px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 90%;
+  padding: 5px;
+  border-radius: 15px;
+  background-color: rgb(0, 196, 10);
+  color: white;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 90%;
+  height: 100%;
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs {
+  outline: none;
+  border-radius: 15px;
+  border: none;
+  padding: 1px;
+  padding-left: 15px;
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons {
+  width: 50px;
+  background-color: transparent;
+  border: solid white 2px;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover {
+  background-color: aliceblue;
+  color: black;
+  border: solid black 2px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active,
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active {
+  transform: scale(0.9);
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid {
+  background-color: rgb(196, 72, 0);
+}
+
+.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom {
+  background-color: rgb(224, 1, 1);
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  height: 10%;
+  padding: 0;
+  margin: 0;
+  border-radius: 15px 15px 0 0;
+  background-color: aliceblue;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left {
+  display: flex;
+  width: 55%;
+  height: 100%;
+  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-In-Wrap,
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
+  height: 50%;
+  background-color: green;
+  color: white;
+  border-radius: 15px;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
+  background-color: red;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn {
+  background-color: transparent;
+  border: solid black 2px;
+  cursor: pointer;
+  width: 70px;
+  height: 50%;
+  font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+  color: black;
+  font-weight: 600;
+  transition: all 50ms ease-in-out;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn:hover {
+  color: white;
+  background-color: black;
+  border: solid white 2px;
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn:active {
+  transform: scale(0.9);
+}
+
+.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Right {
+  width: 30%;
+  height: 100%;
+  display: flex;
+  font-size: 0.8rem;
+  text-align: end;
+  align-items: center;
+  justify-content: end;
+  flex-direction: row;
+}
+
+@media screen and (max-width: 800px) {
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: rgb(209, 209, 209);
+  }
+
+  .dashboard .dashboard-Wrap {
+    width: 360px;
+    height: 600px;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left .dashboard-Top-Left-Text-1 {
+    font-size: 0.9rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-1,
+  .dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
+    font-size: 0.9rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
+    font-size: 0.7rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right .dashboard-Top-Right-Text-1 {
+    padding: 0;
+    font-size: 0.9rem;
+    color: rgb(34, 34, 34);
+    font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+    margin: 5px;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left {
+    width: 55%;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .type-Of-Transfer {
+    font-size: 0.8rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .date-Of-Transfer {
+    font-size: 0.7rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .amount-Of-Transfer {
+    font-size: 0.8rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right {
+    width: 40%;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Title,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Title,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Title {
+    font-size: 0.8rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs {
+    width: 80%;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
+  .dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons {
+    border: solid white 1px;
+    width: 50%;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom {
+    justify-content: space-between;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left {
+    width: 70%;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-In-Wrap {
+    font-size: 0.7rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
+    font-size: 0.7rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn {
+    cursor: pointer;
+    width: 50px;
+    font-size: 0.7rem;
+  }
+
+  .dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Right {
+    font-size: 0.6rem;
+    text-align: center;
+    width: 25%;
+  }
+}
diff --git a/src/dashboard.css.map b/src/dashboard.css.map
new file mode 100644
index 0000000..3cd71e0
--- /dev/null
+++ b/src/dashboard.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["dashboard.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,aAvCA;EAwCA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA,aAxDA;;AA2DF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,aA7EA;EA8EA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAjKF;;AAoKI;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA1KN;;AA6KI;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EACE;;AAOV;EACE;;AAGF;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,aA3PA;EA4PA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMR;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAII;IACE;;EAKF;AAAA;IAEE;;EAGF;IACE;;EAKF;IACE;IACA;IACA;IACA,aA/TF;IAgUE;;EAMJ;IACE;;EAII;IACE;;EAGF;IACE;;EAGF;IACE;;EAMR;IACE;;EAMI;AAAA;AAAA;IACE;;EAIA;AAAA;AAAA;IACE;;EAGF;AAAA;AAAA;IACE;IACA;;EAQZ;IACE;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAIJ;IACE;IACA;IACA","file":"dashboard.css"}
\ No newline at end of file
diff --git a/src/dashboard.scss b/src/dashboard.scss
new file mode 100644
index 0000000..a438a55
--- /dev/null
+++ b/src/dashboard.scss
@@ -0,0 +1,402 @@
+$fontOne: "Poppins", "Helvetica Neue", helvetica, sans-serif;
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgb(209, 209, 209);
+
+  .dashboard-Wrap {
+    width: 769px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    border: solid white 2px;
+    border-radius: 17px 17px 0 0;
+
+    .dashboard-Top {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: center;
+      align-items: center;
+      width: 100%;
+      height: 10%;
+      background-color: aliceblue;
+      border-radius: 15px 15px 0 0;
+
+      .dashboard-Top-Left {
+        padding: 0;
+        margin: 0;
+
+        .dashboard-Top-Left-Text-1 {
+          padding: 0;
+          font-family: $fontOne;
+          font-size: 1.2rem;
+          color: rgb(34, 34, 34);
+          margin: 5px;
+        }
+      }
+
+      .dashboard-Top-Mid {
+        padding: 0;
+        margin: 0;
+
+        .dashboard-Top-Mid-Text-1,
+        .dashboard-Top-Mid-Text-2 {
+          padding: 0;
+          margin: 0;
+          font-size: 1.2rem;
+          color: rgb(34, 34, 34);
+          font-family: $fontOne;
+        }
+
+        .dashboard-Top-Mid-Text-2 {
+          color: gray;
+          font-size: 0.8rem;
+        }
+      }
+
+      .dashboard-Top-Right {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        text-align: start;
+        align-items: start;
+        justify-content: start;
+
+        .dashboard-Top-Right-Text-1 {
+          padding: 0;
+          font-size: 1.2rem;
+          color: rgb(34, 34, 34);
+          font-family: $fontOne;
+          margin: 5px;
+        }
+      }
+    }
+
+    .dashboard-Mid {
+      height: 75%;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      text-align: center;
+      align-items: center;
+      justify-content: space-between;
+
+      .dashboard-Mid-Left {
+        height: 100%;
+        width: 65%;
+        display: flex;
+        border-radius: 0 15px 15px 0;
+        overflow: hidden;
+
+        .dashboard-Mid-Left-Wrap {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          text-align: start;
+          align-items: start;
+          overflow-y: auto;
+          overflow-x: hidden;
+          gap: 1px;
+
+          .dashboard-Transfer-Card {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            flex-direction: row;
+            text-align: center;
+            align-items: center;
+            justify-content: space-evenly;
+            background-color: aliceblue;
+            border: solid rgba(175, 175, 175, 0.678) 1px;
+            border-left: none;
+            border-top: none;
+            border-right: none;
+            padding: 1px;
+          }
+        }
+      }
+
+      .dashboard-Mid-Right {
+        height: 100%;
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        justify-content: space-evenly;
+        background-color: aliceblue;
+        border-radius: 15px 0 0 15px;
+
+        .dashboard-Mid-Top,
+        .dashboard-Mid-Mid,
+        .dashboard-Mid-Bottom {
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+          align-items: center;
+          justify-content: center;
+          width: 90%;
+          padding: 5px;
+          border-radius: 15px;
+          background-color: rgb(0, 196, 10);
+          color: white;
+
+          .dashboard-Card-Wrap {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            width: 90%;
+            height: 100%;
+            font-family: $fontOne;
+
+            .dashboard-Card-Inputs-Wrap {
+              .dashboard-Card-Inputs {
+                outline: none;
+                border-radius: 15px;
+                border: none;
+                padding: 1px;
+                padding-left: 15px;
+                font-family: $fontOne;
+              }
+
+              .dashboard-Card-Inputs-Buttons {
+                width: 50px;
+                background-color: transparent;
+                border: solid white 2px;
+                color: white;
+                border-radius: 5px;
+                cursor: pointer;
+
+                &:hover {
+                  background-color: aliceblue;
+                  color: black;
+                  border: solid black 2px;
+                }
+
+                &:active {
+                  transform: scale(0.9);
+                }
+              }
+            }
+          }
+        }
+
+        .dashboard-Mid-Mid {
+          background-color: rgb(196, 72, 0);
+        }
+
+        .dashboard-Mid-Bottom {
+          background-color: rgb(224, 1, 1);
+        }
+      }
+    }
+
+    .dashboard-Bottom {
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      height: 10%;
+      padding: 0;
+      margin: 0;
+      border-radius: 15px 15px 0 0;
+      background-color: aliceblue;
+
+      .dashboard-Bottom-Left {
+        display: flex;
+        width: 55%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: row;
+
+        .dashboard-Bottom-Left-In-Wrap,
+        .dashboard-Bottom-Left-Out-Wrap {
+          height: 50%;
+          background-color: green;
+          color: white;
+          border-radius: 15px;
+          text-align: center;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          width: 150px;
+        }
+
+        .dashboard-Bottom-Left-Out-Wrap {
+          background-color: red;
+        }
+
+        .dashboard-Bottom-Left-Sort-Btn {
+          background-color: transparent;
+          border: solid black 2px;
+          cursor: pointer;
+          width: 70px;
+          height: 50%;
+          font-family: $fontOne;
+          color: black;
+          font-weight: 600;
+          transition: all 50ms ease-in-out;
+
+          &:hover {
+            color: white;
+            background-color: black;
+            border: solid white 2px;
+          }
+
+          &:active {
+            transform: scale(0.9);
+          }
+        }
+      }
+
+      .dashboard-Bottom-Right {
+        width: 30%;
+        height: 100%;
+        display: flex;
+        font-size: 0.8rem;
+        text-align: end;
+        align-items: center;
+        justify-content: end;
+        flex-direction: row;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: rgb(209, 209, 209);
+
+    .dashboard-Wrap {
+      width: 360px;
+      height: 600px;
+
+      .dashboard-Top {
+        .dashboard-Top-Left {
+          .dashboard-Top-Left-Text-1 {
+            font-size: 0.9rem;
+          }
+        }
+
+        .dashboard-Top-Mid {
+          .dashboard-Top-Mid-Text-1,
+          .dashboard-Top-Mid-Text-2 {
+            font-size: 0.9rem;
+          }
+
+          .dashboard-Top-Mid-Text-2 {
+            font-size: 0.7rem;
+          }
+        }
+
+        .dashboard-Top-Right {
+          .dashboard-Top-Right-Text-1 {
+            padding: 0;
+            font-size: 0.9rem;
+            color: rgb(34, 34, 34);
+            font-family: $fontOne;
+            margin: 5px;
+          }
+        }
+      }
+
+      .dashboard-Mid {
+        .dashboard-Mid-Left {
+          width: 55%;
+
+          .dashboard-Mid-Left-Wrap {
+            .dashboard-Transfer-Card {
+              .type-Of-Transfer {
+                font-size: 0.8rem;
+              }
+
+              .date-Of-Transfer {
+                font-size: 0.7rem;
+              }
+
+              .amount-Of-Transfer {
+                font-size: 0.8rem;
+              }
+            }
+          }
+        }
+
+        .dashboard-Mid-Right {
+          width: 40%;
+
+          .dashboard-Mid-Top,
+          .dashboard-Mid-Mid,
+          .dashboard-Mid-Bottom {
+            .dashboard-Card-Wrap {
+              .dashboard-Card-Title {
+                font-size: 0.8rem;
+              }
+
+              .dashboard-Card-Inputs-Wrap {
+                .dashboard-Card-Inputs {
+                  width: 80%;
+                }
+
+                .dashboard-Card-Inputs-Buttons {
+                  border: solid white 1px;
+                  width: 50%;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .dashboard-Bottom {
+        justify-content: space-between;
+
+        .dashboard-Bottom-Left {
+          width: 70%;
+
+          .dashboard-Bottom-Left-In-Wrap {
+            font-size: 0.7rem;
+          }
+
+          .dashboard-Bottom-Left-Out-Wrap {
+            font-size: 0.7rem;
+          }
+
+          .dashboard-Bottom-Left-Sort-Btn {
+            cursor: pointer;
+            width: 50px;
+            font-size: 0.7rem;
+          }
+        }
+
+        .dashboard-Bottom-Right {
+          font-size: 0.6rem;
+          text-align: center;
+          width: 25%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/home.html b/src/home.html
index 2f4f7b4..0791356 100644
--- a/src/home.html
+++ b/src/home.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>COMPLETE: Bankist DEMO| When Banking meets Minimalist</title>
     <link rel="stylesheet" href="home.css" />
+    <link rel="stylesheet" href="dashboard.css" />
     <link rel="icon" href="google.png" />
     <link
       href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&amp;display=swap"
@@ -20,328 +21,340 @@
     />
   </head>
   <body>
-    <!-- navbar -->
-    <nav class="navbar">
-      <div class="navbar-Wrap">
-        <div class="nav-Left">
-          <div class="nav-Left-Wrap">
-            <img class="nav-Left-Img" src="./assets/logo.png" alt="logo-img" />
+    <!-- user landing page -->
+    <section class="landing-Page">
+      <!-- navbar -->
+      <nav class="navbar">
+        <div class="navbar-Wrap">
+          <div class="nav-Left">
+            <div class="nav-Left-Wrap">
+              <img
+                class="nav-Left-Img"
+                src="./assets/logo.png"
+                alt="logo-img"
+              />
+            </div>
           </div>
-        </div>
-        <div class="nav-Right">
-          <div class="nav-Right-Wrap">
-            <div class="nav-Right-Links-Wrap">
-              <ul>
-                <li><a href="#about">Features</a></li>
-                <li><a href="#operations">Operations</a></li>
-                <li><a href="#customers">Testimonials</a></li>
-                <li>
-                  <button class="create-Account-Btn" id="open-Accounts-Btns">
-                    Open account
-                  </button>
+          <div class="nav-Right">
+            <div class="nav-Right-Wrap">
+              <div class="nav-Right-Links-Wrap">
+                <ul>
+                  <li><a href="#about">Features</a></li>
+                  <li><a href="#operations">Operations</a></li>
+                  <li><a href="#customers">Testimonials</a></li>
+                  <li>
+                    <button class="create-Account-Btn" id="open-Accounts-Btns">
+                      Open account
+                    </button>
 
-                  <button class="create-Account-Btn" id="login-Btn">
-                    Login
-                  </button>
-                </li>
-              </ul>
+                    <button class="create-Account-Btn" id="login-Btn">
+                      Login
+                    </button>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- burger menu btn  -->
-      <section class="burger-Menu">
-        <div class="burger-Menu-Wrap">
-          <span class="b-M-Bar-1" id="b-M-Bars"></span>
-          <span class="b-M-Bar-2" id="b-M-Bars"></span>
-          <span class="b-M-Bar-3" id="b-M-Bars"></span>
-        </div>
-      </section>
-    </nav>
-    <!-- header -->
-    <section class="header">
-      <div class="header-Wrap">
-        <div class="header-Left">
-          <div class="header-Left-Wrap">
-            <h1 class="header-Left-Text-1">
-              When
-              <span class="header-Left-Text-1-1">banking</span>
-              meets
-              <span class="header-Left-Text-1-2">minimalist</span>
-            </h1>
-            <h4 class="header-Left-Text-2">
-              A simpler banking experience for a simpler life.
-            </h4>
-            <a href="#about" class="header-Left-Button">
-              Learn More<i
-                id="header-Left-Button-Icon"
-                class="fa-solid fa-arrow-down"
-              ></i>
-            </a>
+        <!-- burger menu btn  -->
+        <section class="burger-Menu">
+          <div class="burger-Menu-Wrap">
+            <span class="b-M-Bar-1" id="b-M-Bars"></span>
+            <span class="b-M-Bar-2" id="b-M-Bars"></span>
+            <span class="b-M-Bar-3" id="b-M-Bars"></span>
           </div>
-        </div>
-        <div class="header-Right">
-          <div class="header-Right-Wrap">
-            <img class="header-Right-Img" src="./assets/hero.png" alt="" />
+        </section>
+      </nav>
+      <!-- header -->
+      <section class="header">
+        <div class="header-Wrap">
+          <div class="header-Left">
+            <div class="header-Left-Wrap">
+              <h1 class="header-Left-Text-1">
+                When
+                <span class="header-Left-Text-1-1">banking</span>
+                meets
+                <span class="header-Left-Text-1-2">minimalist</span>
+              </h1>
+              <h4 class="header-Left-Text-2">
+                A simpler banking experience for a simpler life.
+              </h4>
+              <a href="#about" class="header-Left-Button">
+                Learn More<i
+                  id="header-Left-Button-Icon"
+                  class="fa-solid fa-arrow-down"
+                ></i>
+              </a>
+            </div>
           </div>
-        </div>
-      </div>
-    </section>
-    <!-- about -->
-    <section class="about" id="about">
-      <div class="about-Wrap">
-        <div class="about-Top">
-          <div class="about-Top-Wrap">
-            <h2 class="about-Top-Text-1">FEATURES</h2>
-            <h1 class="about-Top-Text-2">
-              Everything you need in a modern bank and more.
-            </h1>
+          <div class="header-Right">
+            <div class="header-Right-Wrap">
+              <img class="header-Right-Img" src="./assets/hero.png" alt="" />
+            </div>
           </div>
         </div>
-        <div class="about-Bottom">
-          <div class="about-Bottom-Wrap">
-            <div class="about-Card">
-              <div class="about-Card-Left">
-                <img
-                  class="about-Card-Left-Img"
-                  id="about-Card-I-1"
-                  src="./assets/digital.jpg"
-                  alt=""
-                />
-              </div>
-              <div class="about-Card-Right">
-                <div class="about-Card-Right-Wrap">
-                  <i class="fa-solid fa-desktop" id="about-Card-Icon"></i>
-                  <h1 class="about-Card-Right-Text-1">100% digital bank</h1>
-                  <p class="about-Card-Right-Text-2">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Unde alias sint quos? Accusantium a fugiat porro reiciendis
-                    saepe quibusdam debitis ducimus.
-                  </p>
-                </div>
-              </div>
+      </section>
+      <!-- about -->
+      <section class="about" id="about">
+        <div class="about-Wrap">
+          <div class="about-Top">
+            <div class="about-Top-Wrap">
+              <h2 class="about-Top-Text-1">FEATURES</h2>
+              <h1 class="about-Top-Text-2">
+                Everything you need in a modern bank and more.
+              </h1>
             </div>
-            <div class="about-Card reversed">
-              <div class="about-Card-Left">
-                <img
-                  class="about-Card-Left-Img"
-                  id="about-Card-I-1"
-                  src="./assets/grow.jpg"
-                  alt=""
-                />
+          </div>
+          <div class="about-Bottom">
+            <div class="about-Bottom-Wrap">
+              <div class="about-Card">
+                <div class="about-Card-Left">
+                  <img
+                    class="about-Card-Left-Img"
+                    id="about-Card-I-1"
+                    src="./assets/digital.jpg"
+                    alt=""
+                  />
+                </div>
+                <div class="about-Card-Right">
+                  <div class="about-Card-Right-Wrap">
+                    <i class="fa-solid fa-desktop" id="about-Card-Icon"></i>
+                    <h1 class="about-Card-Right-Text-1">100% digital bank</h1>
+                    <p class="about-Card-Right-Text-2">
+                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                      Unde alias sint quos? Accusantium a fugiat porro
+                      reiciendis saepe quibusdam debitis ducimus.
+                    </p>
+                  </div>
+                </div>
               </div>
-              <div class="about-Card-Right">
-                <div class="about-Card-Right-Wrap">
-                  <i
-                    class="fa-solid fa-arrow-trend-up"
-                    id="about-Card-Icon"
-                  ></i>
+              <div class="about-Card reversed">
+                <div class="about-Card-Left">
+                  <img
+                    class="about-Card-Left-Img"
+                    id="about-Card-I-1"
+                    src="./assets/grow.jpg"
+                    alt=""
+                  />
+                </div>
+                <div class="about-Card-Right">
+                  <div class="about-Card-Right-Wrap">
+                    <i
+                      class="fa-solid fa-arrow-trend-up"
+                      id="about-Card-Icon"
+                    ></i>
 
-                  <h1 class="about-Card-Right-Text-1">Watch your money grow</h1>
-                  <p class="about-Card-Right-Text-2">
-                    Nesciunt quos autem dolorum voluptates cum dolores dicta
-                    fuga inventore ab? Nulla incidunt eius numquam sequi iste
-                    pariatur quibusdam!
-                  </p>
+                    <h1 class="about-Card-Right-Text-1">
+                      Watch your money grow
+                    </h1>
+                    <p class="about-Card-Right-Text-2">
+                      Nesciunt quos autem dolorum voluptates cum dolores dicta
+                      fuga inventore ab? Nulla incidunt eius numquam sequi iste
+                      pariatur quibusdam!
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="about-Card">
-              <div class="about-Card-Left">
-                <img
-                  class="about-Card-Left-Img"
-                  id="about-Card-I-1"
-                  src="./assets/digital.jpg"
-                  alt=""
-                />
-              </div>
-              <div class="about-Card-Right">
-                <div class="about-Card-Right-Wrap">
-                  <i class="fa-solid fa-credit-card" id="about-Card-Icon"></i>
-                  <h1 class="about-Card-Right-Text-1">
-                    Free debit card included
-                  </h1>
-                  <p class="about-Card-Right-Text-2">
-                    Quasi, fugit in cumque cupiditate reprehenderit debitis
-                    animi enim eveniet consequatur odit quam quos possimus
-                    assumenda dicta fuga inventore ab.
-                  </p>
+              <div class="about-Card">
+                <div class="about-Card-Left">
+                  <img
+                    class="about-Card-Left-Img"
+                    id="about-Card-I-1"
+                    src="./assets/digital.jpg"
+                    alt=""
+                  />
+                </div>
+                <div class="about-Card-Right">
+                  <div class="about-Card-Right-Wrap">
+                    <i class="fa-solid fa-credit-card" id="about-Card-Icon"></i>
+                    <h1 class="about-Card-Right-Text-1">
+                      Free debit card included
+                    </h1>
+                    <p class="about-Card-Right-Text-2">
+                      Quasi, fugit in cumque cupiditate reprehenderit debitis
+                      animi enim eveniet consequatur odit quam quos possimus
+                      assumenda dicta fuga inventore ab.
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <!-- operations -->
-    <section class="operations" id="operations">
-      <div class="operations-Wrap">
-        <div class="operations-Top">
-          <div class="operations-Top-Wrap">
-            <h3 class="operations-Top-Text-1">OPERATIONS</h3>
-            <h1 class="operations-Top-Text-2">
-              Everything as simple as possible, but no simpler.
-            </h1>
+      </section>
+      <!-- operations -->
+      <section class="operations" id="operations">
+        <div class="operations-Wrap">
+          <div class="operations-Top">
+            <div class="operations-Top-Wrap">
+              <h3 class="operations-Top-Text-1">OPERATIONS</h3>
+              <h1 class="operations-Top-Text-2">
+                Everything as simple as possible, but no simpler.
+              </h1>
+            </div>
           </div>
-        </div>
-        <div class="operations-bottom">
-          <div class="operations-Bottom-Wrap">
-            <div class="operations-Bottom-Text-Wrap">
-              <div class="operations-Bottom-Text-Wrap-Left">
-                <i
-                  id="operations-Bottom-Text-Wrap-Left-Icon"
-                  class="fa-solid fa-phone"
-                ></i>
-              </div>
-              <div class="operations-Bottom-Text-Wrap-Right">
-                <h1 class="operations-Bottom-Text-1"></h1>
-                <p class="operations-Bottom-Text-2"></p>
-              </div>
-              <div class="operations-Buttons-Wrap">
-                <div
-                  class="operations-Text-Wrap active"
-                  id="operations-Text-Wrap-1"
-                >
-                  <h1 id="operations-Texts">
-                    <span>01</span> Instant Transfers
-                  </h1>
+          <div class="operations-bottom">
+            <div class="operations-Bottom-Wrap">
+              <div class="operations-Bottom-Text-Wrap">
+                <div class="operations-Bottom-Text-Wrap-Left">
+                  <i
+                    id="operations-Bottom-Text-Wrap-Left-Icon"
+                    class="fa-solid fa-phone"
+                  ></i>
                 </div>
-                <div class="operations-Text-Wrap" id="operations-Text-Wrap-2">
-                  <h1 id="operations-Texts"><span>02</span> Instant Loans</h1>
+                <div class="operations-Bottom-Text-Wrap-Right">
+                  <h1 class="operations-Bottom-Text-1"></h1>
+                  <p class="operations-Bottom-Text-2"></p>
                 </div>
-                <div class="operations-Text-Wrap" id="operations-Text-Wrap-3">
-                  <h1 id="operations-Texts"><span>03</span> Instant Closing</h1>
+                <div class="operations-Buttons-Wrap">
+                  <div
+                    class="operations-Text-Wrap active"
+                    id="operations-Text-Wrap-1"
+                  >
+                    <h1 id="operations-Texts">
+                      <span>01</span> Instant Transfers
+                    </h1>
+                  </div>
+                  <div class="operations-Text-Wrap" id="operations-Text-Wrap-2">
+                    <h1 id="operations-Texts"><span>02</span> Instant Loans</h1>
+                  </div>
+                  <div class="operations-Text-Wrap" id="operations-Text-Wrap-3">
+                    <h1 id="operations-Texts">
+                      <span>03</span> Instant Closing
+                    </h1>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <!-- customers -->
-    <section class="customers" id="customers">
-      <div class="customers-Wrap">
-        <div class="customers-Top">
-          <div class="customers-Top-Wrap">
-            <div class="customers-Top-Text-Wrap">
-              <h3 class="customers-Top-Text-1">NOT SURE YET?</h3>
-              <h2 class="customers-Top-Text-2">
-                Millions of Bankists are already making their lifes simpler.
-              </h2>
+      </section>
+      <!-- customers -->
+      <section class="customers" id="customers">
+        <div class="customers-Wrap">
+          <div class="customers-Top">
+            <div class="customers-Top-Wrap">
+              <div class="customers-Top-Text-Wrap">
+                <h3 class="customers-Top-Text-1">NOT SURE YET?</h3>
+                <h2 class="customers-Top-Text-2">
+                  Millions of Bankists are already making their lifes simpler.
+                </h2>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="customers-Bottom">
-          <div class="customers-Bottom-Wrap">
-            <div class="customer-Bottom-L-R-Btns-Wrap">
-              <div class="customer-Left-Btn-Wrap">
-                <i
-                  id="customer-Bottoms-L-R-Ids"
-                  class="fa-solid fa-hand-point-left"
-                ></i>
+          <div class="customers-Bottom">
+            <div class="customers-Bottom-Wrap">
+              <div class="customer-Bottom-L-R-Btns-Wrap">
+                <div class="customer-Left-Btn-Wrap">
+                  <i
+                    id="customer-Bottoms-L-R-Ids"
+                    class="fa-solid fa-hand-point-left"
+                  ></i>
+                </div>
+                <div class="customer-Right-Btn-Wrap">
+                  <i
+                    id="customer-Bottoms-L-R-Ids"
+                    class="fa-solid fa-hand-point-right"
+                  ></i>
+                </div>
               </div>
-              <div class="customer-Right-Btn-Wrap">
-                <i
-                  id="customer-Bottoms-L-R-Ids"
-                  class="fa-solid fa-hand-point-right"
-                ></i>
+              <div class="customer-Bottom-Buttons-Wrap">
+                <div
+                  class="customer-Bottom-Btns active"
+                  id="customers-Bottom-Btn-1"
+                ></div>
+                <div
+                  class="customer-Bottom-Btns"
+                  id="customers-Bottom-Btn-2"
+                ></div>
+                <div
+                  class="customer-Bottom-Btns"
+                  id="customers-Bottom-Btn-3"
+                ></div>
               </div>
-            </div>
-            <div class="customer-Bottom-Buttons-Wrap">
-              <div
-                class="customer-Bottom-Btns active"
-                id="customers-Bottom-Btn-1"
-              ></div>
-              <div
-                class="customer-Bottom-Btns"
-                id="customers-Bottom-Btn-2"
-              ></div>
-              <div
-                class="customer-Bottom-Btns"
-                id="customers-Bottom-Btn-3"
-              ></div>
-            </div>
-            <div class="customers-Card-Wrap">
-              <div class="customers-Cards-Holder">
-                <div class="customers-Card">
-                  <h2 class="customers-Title-Text-1">
-                    Best financial decision ever!
-                  </h2>
-                  <p class="customers-Text-2">
-                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                    Accusantium quas quisquam non? Quas voluptate nulla minima
-                    deleniti optio ullam nesciunt, numquam corporis et
-                    asperiores laboriosam sunt, praesentium suscipit blanditiis.
-                    Necessitatibus id alias reiciendis, perferendis facere
-                    pariatur dolore veniam autem esse non voluptatem saepe
-                    provident nihil molestiae.
-                  </p>
-                  <div class="card-Name-Img-Wrap">
-                    <div class="card-Img-Wrap">
-                      <img
-                        class="customers-Imgs"
-                        id="customer-Img-1"
-                        src="./assets/user-1.jpg"
-                        alt=""
-                      />
-                    </div>
-                    <div class="card-Name-Location-Wrap">
-                      <h2 class="card-Name">Aarav Lynn</h2>
-                      <h3 class="card-Location">San Francisco, USA</h3>
+              <div class="customers-Card-Wrap">
+                <div class="customers-Cards-Holder">
+                  <div class="customers-Card">
+                    <h2 class="customers-Title-Text-1">
+                      Best financial decision ever!
+                    </h2>
+                    <p class="customers-Text-2">
+                      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                      Accusantium quas quisquam non? Quas voluptate nulla minima
+                      deleniti optio ullam nesciunt, numquam corporis et
+                      asperiores laboriosam sunt, praesentium suscipit
+                      blanditiis. Necessitatibus id alias reiciendis,
+                      perferendis facere pariatur dolore veniam autem esse non
+                      voluptatem saepe provident nihil molestiae.
+                    </p>
+                    <div class="card-Name-Img-Wrap">
+                      <div class="card-Img-Wrap">
+                        <img
+                          class="customers-Imgs"
+                          id="customer-Img-1"
+                          src="./assets/user-1.jpg"
+                          alt=""
+                        />
+                      </div>
+                      <div class="card-Name-Location-Wrap">
+                        <h2 class="card-Name">Aarav Lynn</h2>
+                        <h3 class="card-Location">San Francisco, USA</h3>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="customers-Card">
-                  <h2 class="customers-Title-Text-1">
-                    The last step to becoming a complete minimalist
-                  </h2>
-                  <p class="customers-Text-2">
-                    Quisquam itaque deserunt ullam, quia ea repellendus
-                    provident, ducimus neque ipsam modi voluptatibus doloremque,
-                    corrupti laborum. Incidunt numquam perferendis veritatis
-                    neque repellendus. Lorem, ipsum dolor sit amet consectetur
-                    adipisicing elit. Illo deserunt exercitationem deleniti.
-                  </p>
-                  <div class="card-Name-Img-Wrap">
-                    <div class="card-Img-Wrap">
-                      <img
-                        class="customers-Imgs"
-                        id="customer-Img-1"
-                        src="./assets/user-2.jpg"
-                        alt=""
-                      />
-                    </div>
-                    <div class="card-Name-Location-Wrap">
-                      <h2 class="card-Name">Aarav Lynn</h2>
-                      <h3 class="card-Location">San Francisco, USA</h3>
+                  <div class="customers-Card">
+                    <h2 class="customers-Title-Text-1">
+                      The last step to becoming a complete minimalist
+                    </h2>
+                    <p class="customers-Text-2">
+                      Quisquam itaque deserunt ullam, quia ea repellendus
+                      provident, ducimus neque ipsam modi voluptatibus
+                      doloremque, corrupti laborum. Incidunt numquam perferendis
+                      veritatis neque repellendus. Lorem, ipsum dolor sit amet
+                      consectetur adipisicing elit. Illo deserunt exercitationem
+                      deleniti.
+                    </p>
+                    <div class="card-Name-Img-Wrap">
+                      <div class="card-Img-Wrap">
+                        <img
+                          class="customers-Imgs"
+                          id="customer-Img-1"
+                          src="./assets/user-2.jpg"
+                          alt=""
+                        />
+                      </div>
+                      <div class="card-Name-Location-Wrap">
+                        <h2 class="card-Name">Aarav Lynn</h2>
+                        <h3 class="card-Location">San Francisco, USA</h3>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="customers-Card">
-                  <h2 class="customers-Title-Text-1">
-                    Finally free from old-school banks
-                  </h2>
-                  <p class="customers-Text-2">
-                    Debitis, nihil sit minus suscipit magni aperiam vel tenetur
-                    incidunt commodi architecto numquam omnis nulla autem,
-                    necessitatibus blanditiis modi similique quidem. Odio
-                    aliquam culpa dicta beatae quod maiores ipsa minus
-                    consequatur error sunt, deleniti saepe aliquid quos
-                    inventore sequi. Necessitatibus id alias reiciendis,
-                    perferendis facere.
-                  </p>
-                  <div class="card-Name-Img-Wrap">
-                    <div class="card-Img-Wrap">
-                      <img
-                        class="customers-Imgs"
-                        id="customer-Img-1"
-                        src="./assets/download.jpg"
-                        alt=""
-                      />
-                    </div>
-                    <div class="card-Name-Location-Wrap">
-                      <h2 class="card-Name">Francisco Gomes</h2>
-                      <h3 class="card-Location">Lisbon, Portugal</h3>
+                  <div class="customers-Card">
+                    <h2 class="customers-Title-Text-1">
+                      Finally free from old-school banks
+                    </h2>
+                    <p class="customers-Text-2">
+                      Debitis, nihil sit minus suscipit magni aperiam vel
+                      tenetur incidunt commodi architecto numquam omnis nulla
+                      autem, necessitatibus blanditiis modi similique quidem.
+                      Odio aliquam culpa dicta beatae quod maiores ipsa minus
+                      consequatur error sunt, deleniti saepe aliquid quos
+                      inventore sequi. Necessitatibus id alias reiciendis,
+                      perferendis facere.
+                    </p>
+                    <div class="card-Name-Img-Wrap">
+                      <div class="card-Img-Wrap">
+                        <img
+                          class="customers-Imgs"
+                          id="customer-Img-1"
+                          src="./assets/download.jpg"
+                          alt=""
+                        />
+                      </div>
+                      <div class="card-Name-Location-Wrap">
+                        <h2 class="card-Name">Francisco Gomes</h2>
+                        <h3 class="card-Location">Lisbon, Portugal</h3>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -349,97 +362,327 @@ <h3 class="card-Location">Lisbon, Portugal</h3>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <!-- footer -->
-    <section class="footer">
-      <div class="footer-Wrap">
-        <div class="footer-Top">
-          <h1 class="footer-Top-Text-1">
-            The best day to join Bankist was one year ago. The second best is
-            today!
-          </h1>
-          <button class="footer-Top-Btn" id="open-Accounts-Btns">
-            OPEN ACCOUNT
-          </button>
-        </div>
-        <div class="footer-Bottom">
-          <a
-            rel="noopener"
-            target="_blank"
-            id="footer-Bottom-Icon"
-            href="https://github.com/Ameer2000Mzori"
-          >
-            <i id="footer-Bottom-Icon" class="fa-brands fa-github"></i
-          ></a>
+      </section>
+      <!-- footer -->
+      <section class="footer">
+        <div class="footer-Wrap">
+          <div class="footer-Top">
+            <h1 class="footer-Top-Text-1">
+              The best day to join Bankist was one year ago. The second best is
+              today!
+            </h1>
+            <button class="footer-Top-Btn" id="open-Accounts-Btns">
+              OPEN ACCOUNT
+            </button>
+          </div>
+          <div class="footer-Bottom">
+            <a
+              rel="noopener"
+              target="_blank"
+              id="footer-Bottom-Icon"
+              href="https://github.com/Ameer2000Mzori"
+            >
+              <i id="footer-Bottom-Icon" class="fa-brands fa-github"></i
+            ></a>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <!-- open account form -->
-    <section class="account">
-      <div class="account-Wrap">
-        <div class="account-top-Button-Wrap">
-          <button class="close-Create-Account-Card">
-            <i id="close-Create-A-C-Icon" class="fa-solid fa-xmark"></i>
-          </button>
-        </div>
-        <div class="account-Top">
-          <h1 class="account-Top-Text-1">
-            Open your bank account in just 5 minutes
-          </h1>
+      <!-- open account form -->
+      <section class="account">
+        <div class="account-Wrap">
+          <div class="account-top-Button-Wrap">
+            <button class="close-Create-Account-Card">
+              <i id="close-Create-A-C-Icon" class="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+          <div class="account-Top">
+            <h1 class="account-Top-Text-1">
+              Open your bank account in just 5 minutes
+            </h1>
+          </div>
+          <div class="account-Input-Wrap">
+            <label id="inputs-Texts-Labels" class="text-label"
+              >First Name</label
+            >
+            <input type="text" class="input-Name" id="input-Text" />
+            <label id="inputs-Texts-Labels" class="text-label"
+              >Email Adress</label
+            >
+            <input type="email" class="input-Email" id="input-Text" />
+            <label id="inputs-Texts-Labels" class="text-label">Password</label>
+            <input type="password" class="input-Password" id="input-Text" />
+          </div>
+          <div class="account-Bottom">
+            <button class="submit-Creation-Account">SUBMIT</button>
+          </div>
         </div>
-        <div class="account-Input-Wrap">
-          <label id="inputs-Texts-Labels" class="text-label">First Name</label>
-          <input type="text" class="input-Name" id="input-Text" />
-          <label id="inputs-Texts-Labels" class="text-label"
-            >Email Adress</label
-          >
-          <input type="email" class="input-Email" id="input-Text" />
-          <label id="inputs-Texts-Labels" class="text-label">Password</label>
-          <input type="password" class="input-Password" id="input-Text" />
+      </section>
+
+      <!-- login -->
+      <section class="login">
+        <div class="login-Wrap">
+          <div class="login-Close-Btn-Wrap">
+            <button class="login-Close-Btn">
+              <i id="login-Close-Btn-Icon" class="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+          <div class="login-Title-Wrap">
+            <h1 class="login-Title-Text">LOGIN RIGHT NOW!</h1>
+          </div>
+          <div class="login-Form-Wrap">
+            <label class="login-Labels-Texts">Email</label>
+            <input
+              type="email"
+              id="login-Email-Input"
+              class="login-Texts-Inputs"
+            />
+            <label class="login-Labels-Texts">Passwords</label>
+            <input
+              type="password"
+              id="login-Password-Input"
+              class="login-Texts-Inputs"
+            />
+          </div>
+          <div class="submit-Login-Btn-Wrap">
+            <button class="submit-Login-Btn">LOGIN!</button>
+          </div>
         </div>
-        <div class="account-Bottom">
-          <button class="submit-Creation-Account">SUBMIT</button>
+      </section>
+    </section>
+    <!-- user dashboard -->
+    <section class="dashboard-Page">
+      <!-- dashboard -->
+      <div class="dashboard">
+        <div class="dashboard-Wrap">
+          <div class="dashboard-Top">
+            <div class="dashboard-Top-Left">
+              <h1 class="dashboard-Top-Left-Text-1">GOOD DAY! AMEER</h1>
+            </div>
+            <div class="dashboard-Top-Mid">
+              <h1 class="dashboard-Top-Mid-Text-1">Current balance</h1>
+              <p class="dashboard-Top-Mid-Text-2">As of 08/01/2024, 05:58</p>
+            </div>
+
+            <div class="dashboard-Top-Right">
+              <h1 class="dashboard-Top-Right-Text-1">25 925,59$</h1>
+            </div>
+          </div>
+          <div class="dashboard-Mid">
+            <div class="dashboard-Mid-Left">
+              <div class="dashboard-Mid-Left-Wrap">
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+                <div class="dashboard-Transfer-Card">
+                  <div class="type-Of-Transfer">Depost</div>
+                  <div class="date-Of-Transfer">19/12/2023</div>
+                  <div class="amount-Of-Transfer">10$</div>
+                </div>
+              </div>
+            </div>
+            <div class="dashboard-Mid-Right">
+              <div class="dashboard-Mid-Top">
+                <div class="dashboard-Card-Wrap">
+                  <div class="dashboard-Card-Title">Transfer money</div>
+                  <div class="dashboard-Card-Inputs-Wrap">
+                    <input
+                      type="text"
+                      class="dashboard-Card-Inputs"
+                      id="dashboard-Card-Input-Transfer"
+                      placeholder="Transfer to"
+                    />
+                    <input
+                      type="number"
+                      class="dashboard-Card-Inputs"
+                      id="dashboard-Card-Input-Amount"
+                      placeholder="Amount"
+                      min="1"
+                      max="1500"
+                    />
+                    <button
+                      class="dashboard-Card-Inputs-Buttons"
+                      id="comfirm-Transfer-Btn"
+                    >
+                      <i
+                        id="dashboard-Icons"
+                        class="fa-solid fa-square-up-right"
+                      ></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="dashboard-Mid-Mid">
+                <div class="dashboard-Card-Wrap">
+                  <div class="dashboard-Card-Title">Request loan</div>
+                  <div class="dashboard-Card-Inputs-Wrap">
+                    <input
+                      type="number"
+                      class="dashboard-Card-Inputs"
+                      id="dashboard-Card-Input-Request-Loan"
+                      placeholder="Amount"
+                      min="1"
+                      max="1500"
+                    />
+                    <button
+                      class="dashboard-Card-Inputs-Buttons"
+                      id="request-Loan-Btn"
+                    >
+                      <i
+                        id="dashboard-Icons"
+                        class="fa-solid fa-square-up-right"
+                      ></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="dashboard-Mid-Bottom">
+                <div class="dashboard-Card-Wrap">
+                  <div class="dashboard-Card-Title">Close account</div>
+                  <div class="dashboard-Card-Inputs-Wrap">
+                    <input
+                      type="text"
+                      class="dashboard-Card-Inputs"
+                      id="dashboard-Card-Confirm-User"
+                      placeholder="Confirm email"
+                    />
+                    <input
+                      type="text"
+                      class="dashboard-Card-Inputs"
+                      id="dashboard-Card-Confirm-PIN"
+                      placeholder="Confirm PIN"
+                    />
+                    <button
+                      class="dashboard-Card-Inputs-Buttons"
+                      id="comfirm-Confirm-PIN"
+                    >
+                      <i
+                        id="dashboard-Icons"
+                        class="fa-solid fa-square-up-right"
+                      ></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="dashboard-Bottom">
+            <div class="dashboard-Bottom-Left">
+              <div class="dashboard-Bottom-Left-In-Wrap">in 27 035,20 $</div>
+              <div class="dashboard-Bottom-Left-Out-Wrap">out 1109,61 $</div>
+              <button class="dashboard-Bottom-Left-Sort-Btn">SORT</button>
+            </div>
+            <div class="dashboard-Bottom-Right">
+              <div class="dash-board-Bottom-Text-1">
+                You will be logged out in 04:12
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>
-
     <!-- notification message element -->
     <section class="notification">
       <h1 class="notification-Message">ACCOUNT ALREADY TAKEN</h1>
     </section>
 
-    <!-- login -->
-    <section class="login">
-      <div class="login-Wrap">
-        <div class="login-Close-Btn-Wrap">
-          <button class="login-Close-Btn">
-            <i id="login-Close-Btn-Icon" class="fa-solid fa-xmark"></i>
-          </button>
-        </div>
-        <div class="login-Title-Wrap">
-          <h1 class="login-Title-Text">LOGIN RIGHT NOW!</h1>
-        </div>
-        <div class="login-Form-Wrap">
-          <label class="login-Labels-Texts">Email</label>
-          <input
-            type="email"
-            id="login-Email-Input"
-            class="login-Texts-Inputs"
-          />
-          <label class="login-Labels-Texts">Passwords</label>
-          <input
-            type="password"
-            id="login-Password-Input"
-            class="login-Texts-Inputs"
-          />
-        </div>
-        <div class="submit-Login-Btn-Wrap">
-          <button class="submit-Login-Btn">LOGIN!</button>
-        </div>
-      </div>
-    </section>
     <script type="module" src="loginAccountLogic.js"></script>
     <script type="module" src="loginAccountHandler.js"></script>
     <script type="module" src="createAccountLogic.js"></script>