diff --git a/src/app/navigation/navigation.component.css b/src/app/navigation/navigation.component.css
index e69de29..94c0248 100644
--- a/src/app/navigation/navigation.component.css
+++ b/src/app/navigation/navigation.component.css
@@ -0,0 +1,27 @@
+/* <mat-toolbar color="primary">
+    <span>NotePage</span>
+    <span class="spacer"></span>
+    <button mat-icon-button matTooltip="Lock the Page">
+      <mat-icon>lock</mat-icon>
+    </button>
+    <button mat-icon-button matTooltip="Share the Link" (click)="sharePage()">
+      <mat-icon>share</mat-icon>
+    </button>
+  </mat-toolbar>
+   */
+
+   /* Write css for above html code */
+    /* Path: src/app/navigation/navigation.component.css */
+    .spacer {
+      flex: 1 1 auto;
+    }
+
+    .icon-button{
+        margin-right: 10vh;
+    }
+
+    .title{
+        margin-left: 10vh;
+        font-size: 35px;
+        cursor: pointer;
+    }
\ No newline at end of file
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
index 5922656..e70b117 100644
--- a/src/app/navigation/navigation.component.html
+++ b/src/app/navigation/navigation.component.html
@@ -1,11 +1,13 @@
 <mat-toolbar color="primary">
-    <span>NotePage</span>
+    <span class="title">NotePage</span>
     <span class="spacer"></span>
+    <div class="icon-button">
     <button mat-icon-button matTooltip="Lock the Page">
       <mat-icon>lock</mat-icon>
     </button>
     <button mat-icon-button matTooltip="Share the Link" (click)="sharePage()">
       <mat-icon>share</mat-icon>
     </button>
+    </div>
   </mat-toolbar>
   
\ No newline at end of file