diff --git a/web/app/components/Paid.tsx b/web/app/components/Paid.tsx
new file mode 100644
index 0000000..16178fb
--- /dev/null
+++ b/web/app/components/Paid.tsx
@@ -0,0 +1,20 @@
+
+
+import React from 'react'
+import styles from './paid.module.css'
+import { BsTriangleFill } from 'react-icons/bs'
+
+export default function Paid() {
+  return (
+    <div className={styles.main}>
+      <div className={styles.left}>
+        <BsTriangleFill
+          size={10}
+          className={styles.arrow}
+        />
+        <div className={styles.text}>Paid</div>
+      </div>
+      <div className={styles.right}>₹5,432</div>
+    </div>
+  )
+}
diff --git a/web/app/components/RecurringCol.tsx b/web/app/components/RecurringCol.tsx
index 311da84..2c4b0be 100644
--- a/web/app/components/RecurringCol.tsx
+++ b/web/app/components/RecurringCol.tsx
@@ -3,6 +3,8 @@ import Calendar from './Calendar'
 import { AiOutlinePlus } from 'react-icons/ai';
 import { VscDebugRestart } from 'react-icons/vsc';
 import React from 'react'
+import Paid from './Paid'
+import Upcoming from './Upcoming'
 
 
 export default function RecurringCol() {
@@ -23,6 +25,10 @@ export default function RecurringCol() {
         </div>
         <Calendar />
       </div>
+      <div className={styles.postCalendar}>
+        <Paid />
+        <Upcoming />
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/RecurringPayment.tsx b/web/app/components/RecurringPayment.tsx
new file mode 100644
index 0000000..f5ef75a
--- /dev/null
+++ b/web/app/components/RecurringPayment.tsx
@@ -0,0 +1,29 @@
+
+import React from 'react'
+import styles from './recurringPayment.module.css'
+import { BsTriangleFill, BsYoutube, BsCalendar2Date } from 'react-icons/bs'
+import { RiHome7Fill } from 'react-icons/ri'
+
+export default function Upcoming() {
+  return (
+    <div className={styles.recurringPayment}>
+      <div className={styles.recurringPaymentTop}>
+        <div className={styles.recurringPaymentTopLeft}>
+          <RiHome7Fill
+            className={styles.paymentIcon}
+            size={50}
+          />
+          <div className={styles.paymentTitle}>2586 Rent</div>
+        </div>
+        <BsCalendar2Date
+          className={styles.paymentIcon}
+          size={50}
+        />
+      </div>
+      <div className={styles.recurringPaymentBottom}>
+        <div>Due in 7 days</div>
+        <div>₹36,163 · monthly</div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/components/Upcoming.tsx b/web/app/components/Upcoming.tsx
new file mode 100644
index 0000000..73c3fb8
--- /dev/null
+++ b/web/app/components/Upcoming.tsx
@@ -0,0 +1,24 @@
+
+import React from 'react'
+import styles from './upcoming.module.css'
+import { BsTriangleFill } from 'react-icons/bs'
+import RecurringPayment from './RecurringPayment'
+
+export default function Upcoming() {
+  return (
+    <div className={styles.main}>
+      <div className={styles.summary}>
+        <div className={styles.left}>
+          <BsTriangleFill
+            size={10}
+            className={styles.arrow}
+          />
+          <div className={styles.text}>Upcoming</div>
+        </div>
+        <div className={styles.right}>₹36,163</div>
+      </div>
+      <RecurringPayment />
+      <RecurringPayment />
+    </div>
+  )
+}
diff --git a/web/app/components/paid.module.css b/web/app/components/paid.module.css
new file mode 100644
index 0000000..b98eecb
--- /dev/null
+++ b/web/app/components/paid.module.css
@@ -0,0 +1,32 @@
+
+.main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #DDDCE4;
+  height: 75px;
+  padding: 20px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+
+}
+
+.arrow {
+  margin-right: 10px;
+  transform: rotate(90deg);
+}
+
+.text {
+  font: 1.3em Arial, Sans-serif;
+  font-weight: 300;
+  color: #787495;
+}
+
+.right {
+  font: 1.3em Arial, Sans-serif;
+  font-weight: 600;
+}
+
diff --git a/web/app/components/recurringCol.module.css b/web/app/components/recurringCol.module.css
index 82c7752..a5d5c9a 100644
--- a/web/app/components/recurringCol.module.css
+++ b/web/app/components/recurringCol.module.css
@@ -1,12 +1,12 @@
 
 .main {
-  background: #20284C;
   width: 400px;
-  border-radius: 20px 20px 0 0;
-  padding: 30px 20px;
 }
 
 .topDiv {
+  background: #20284C;
+  border-radius: 20px 20px 0 0;
+  padding: 30px 20px;
 }
 
 .titleDiv {
@@ -43,3 +43,10 @@
   display: flex;
   align-items: center;
 }
+
+.postCalendar {
+  border-left: 2px solid #DDDCE4;
+  border-right: 2px solid #DDDCE4;
+  background: #fff;
+}
+
diff --git a/web/app/components/recurringPayment.module.css b/web/app/components/recurringPayment.module.css
new file mode 100644
index 0000000..5a4cf94
--- /dev/null
+++ b/web/app/components/recurringPayment.module.css
@@ -0,0 +1,44 @@
+
+.recurringPayment {
+  background: #F0F1F5;
+  margin: 10px 20px 10px 20px;
+  padding: 20px;
+  border-radius: 20px;
+}
+
+.recurringPaymentTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.recurringPaymentTopLeft {
+  display: flex;
+  align-items: center;
+}
+
+.paymentIcon {
+  background: white;
+  border-radius: 15px;
+  padding: 10px;
+}
+
+.paymentTitle {
+  font: 1.3em Arial, Sans-serif;
+  font-weight: 600;
+  margin-left: 20px;
+}
+
+.recurringPaymentBottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  margin: 20px 0 0 0;
+  padding: 15px;
+  font: 1.1em Arial, Sans-serif;
+  font-weight: 300;
+}
+
+
diff --git a/web/app/components/upcoming.module.css b/web/app/components/upcoming.module.css
new file mode 100644
index 0000000..3396d63
--- /dev/null
+++ b/web/app/components/upcoming.module.css
@@ -0,0 +1,35 @@
+
+.main {
+  border-bottom: 2px solid #DDDCE4;
+}
+
+.summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 75px;
+  padding: 20px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+
+}
+
+.arrow {
+  margin-right: 10px;
+  transform: rotate(180deg);
+}
+
+.text {
+  font: 1.3em Arial, Sans-serif;
+  font-weight: 300;
+  color: #787495;
+}
+
+.right {
+  font: 1.3em Arial, Sans-serif;
+  font-weight: 600;
+}
+