diff --git a/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts b/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts
index e2467d0..77385c5 100644
--- a/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts
+++ b/dear-diary-angular/src/app/components/diary-card/diary-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { cardDetails } from 'src/app/models/cardDetails';
 @Component({
   selector: 'app-diary-card',
@@ -6,26 +6,20 @@ import { cardDetails } from 'src/app/models/cardDetails';
   styleUrls: ['./diary-card.component.css'],
 })
 export class DiaryCardComponent implements OnInit {
-  card:cardDetails;
-  isLarge:boolean=false;
+  @Input()
+  card!: cardDetails;
+  isLarge: boolean = false;
   showMore: boolean = false;
-  
-  constructor() {
-    this.card = {
-      title: 'hello',
-      userName: 'lahiru',
-      description:
-        'a lifecycle that starts when Angular instantiates lifecycle that starts pppp  instantiates lifecycle that starts pppp instantiates lifecycle that starts pppp',
-    };
-  }
+
+  constructor() {}
 
   ngOnInit(): void {
     console.log(this.card?.description.length);
-    this.isLarge = this.card?.description.length>100 ? true : false
-    this.showMore = true
+    this.isLarge = this.card?.description.length > 100 ? true : false;
+    this.showMore = true;
   }
 
-  showMoreAction(): void {  
+  showMoreAction(): void {
     this.showMore = this.showMore ? false : true;
   }
 }
diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.css b/dear-diary-angular/src/app/containers/home-page/home-page.component.css
index e69de29..7e4a1ef 100644
--- a/dear-diary-angular/src/app/containers/home-page/home-page.component.css
+++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.css
@@ -0,0 +1,86 @@
+.mainArea {
+  background-color: rgb(59, 165, 202);
+  height: 100%;
+  width: 100%;
+}
+.navbar {
+  position: fixed;
+  height: 3rem;
+  background-color: #00bcd4;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.contentA {
+  display: flex;
+  justify-content: center;
+}
+.inputFields {
+  /* background-color: #f1f6f7;
+  height: max-content;
+  width: 96%;
+  border-radius: 10px;
+  top: 4rem;
+  position: relative;
+  display: inline; */
+
+      background-color: #f1f6f7;
+    width: 96%;
+    border-radius: 10px;
+    top: 4rem;
+    margin: 4% 0% 2% 0%;
+}
+.titleInput {
+  margin: 1% 2% 1% 2%;
+  height: 2rem;
+  min-width: 22rem;
+  border: 1px solid black;
+  border-radius: 15px;
+  padding-left: 1%;
+  transition: width 1s;
+}
+#descInput {
+  margin: 1% 2% 1% 2%;
+  height: 40%;
+  width: 87rem;
+  border: 1px solid black;
+  border-radius: 15px;
+  padding: 1%;
+  transition: height 1s;
+}
+.lable {
+  margin-left: 2rem;
+  margin-top: 1%;
+}
+.submitBtn {
+  border-radius: 15px;
+  background-color: #14a5dd;
+  height: 2rem;
+  color: white;
+  font-size: 16px;
+  border: 1px solid #14a5dd;
+  width: max-content;
+  position: relative;
+  cursor: pointer;
+}
+
+.cardsArea {
+  width: 95%;
+  height: max-content;
+  display: inline-flex;
+  flex-direction: row;
+  background-color: rgb(59, 165, 202);
+  border: 1px solid rgb(59, 165, 202);
+  border-radius: 10px;
+  margin-bottom: 2%;
+  top: 5rem;
+  justify-content: space-between;
+  margin-left: 2%;
+  padding: 8px;
+  flex-wrap: wrap;
+}
+.card {
+  margin-top: 1%;
+  display: inline-block;
+}
diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.html b/dear-diary-angular/src/app/containers/home-page/home-page.component.html
index c3171d5..03c0091 100644
--- a/dear-diary-angular/src/app/containers/home-page/home-page.component.html
+++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.html
@@ -1,5 +1,39 @@
-<p>home-page works!</p>
-<div>
-<app-diary-card></app-diary-card>
+<div class="mainArea">
+  <div class="navbar">
+    <h4 class="pageName">DIARY HOME</h4>
+  </div>
 
-</div>
\ No newline at end of file
+  <div class="contentA">
+    <div class="inputFields">
+      <h2 class="lable" (click)="expand = false">Home</h2>
+      <input
+        type="text"
+        placeholder="Title"
+        class="titleInput"
+        (click)="expand = true"
+        [style.width]="expand ? '82rem' : '20rem'"
+        [formControl]="titleTxt"
+      />
+      <button
+        class="submitBtn"
+        [style.display]="expand ? 'inline' : 'none'"
+        (click)="submitBtnAction()"
+      >
+        Submit
+      </button>
+      <textarea
+        name="Description"
+        placeholder="Description"
+        id="descInput"
+        cols="30"
+        rows="10"
+        [style.display]="expand ? 'inline' : 'none'"
+        [formControl]="descTxt"
+      ></textarea>
+    </div>
+  </div>
+
+  <div class="cardsArea" >
+    <app-diary-card class="card"[card]="card" *ngFor="let card of cards" ></app-diary-card>
+  </div>
+</div>
diff --git a/dear-diary-angular/src/app/containers/home-page/home-page.component.ts b/dear-diary-angular/src/app/containers/home-page/home-page.component.ts
index f0f68dd..f4786a3 100644
--- a/dear-diary-angular/src/app/containers/home-page/home-page.component.ts
+++ b/dear-diary-angular/src/app/containers/home-page/home-page.component.ts
@@ -1,15 +1,43 @@
 import { Component, OnInit } from '@angular/core';
+import { cardDetails } from 'src/app/models/cardDetails';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.css']
+  styleUrls: ['./home-page.component.css'],
 })
 export class HomePageComponent implements OnInit {
+  titleTxt = new FormControl('', Validators.required);
+  descTxt = new FormControl('', Validators.required);
+  cards: cardDetails[] = [];
 
-  constructor() { }
+  card: cardDetails | undefined;
+  expand: boolean = false;
+  constructor() {}
 
   ngOnInit(): void {
+    this.titleTxt.setValue(this.titleTxt.value);
+    this.descTxt.setValue(this.descTxt.value);
   }
 
+  submitBtnAction(): void {
+    this.expand = false;
+
+    if (this.titleTxt.value != '' && this.descTxt.value != '') {
+      const card = {
+        title: this.titleTxt.value,
+        userName: localStorage.getItem('username'),
+        description: this.descTxt.value,
+      } as cardDetails;
+      this.cards.push(card);
+    } else if (this.titleTxt.value == '') {
+      console.log('Missing title !');
+    } else {
+      console.log('Missing description !');
+    }
+
+    this.titleTxt.setValue('');
+    this.descTxt.setValue('');
+  }
 }
diff --git a/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts b/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts
index a1822f9..acbd997 100644
--- a/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts
+++ b/dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 @Component({
@@ -8,7 +8,8 @@ import { Router } from '@angular/router';
 })
 export class SignInPageComponent implements OnInit {
   public disabled: boolean = true;
-  userName = new FormControl('', Validators.required);
+  @Input()
+  public userName = new FormControl('', Validators.required);
 
   constructor(private router: Router) {}
 
@@ -26,6 +27,9 @@ export class SignInPageComponent implements OnInit {
 
   logInAction(): void {
     console.log(this.userName.value);
-    this.router.navigate(['/home']);
+    if (this.userName.value !== null) {
+      this.router.navigate(['/home']);
+      localStorage.setItem('username', this.userName.value);
+    }
   }
 }