diff --git a/config.xml b/config.xml
index 013ab9d..32452b9 100644
--- a/config.xml
+++ b/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.coregrade.users" version="10.0.12" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.coregrade.users" version="10.0.13" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>CoreGrade</name>
     <description>Intelligent Learning Platform.</description>
     <author email="support@coregrade.com" href="https://www.coregrade.com/">CoreGrade</author>
diff --git a/src/app/login/login.page.html b/src/app/login/login.page.html
index c89068a..e0de115 100644
--- a/src/app/login/login.page.html
+++ b/src/app/login/login.page.html
@@ -1,26 +1,61 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Login</ion-title>
+    <ion-title>CoreGrade</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+
+  <ion-card class="welcome-card" style="background-color: aliceblue;">
+
+    <ion-card-header>
+      <ion-card-subtitle>Login</ion-card-subtitle>
+      
+    </ion-card-header>
+   
+    <ion-card-content>
+
+      <ion-list>
+
+        <ion-item>
+          <ion-label floating>Username</ion-label>
+          <ion-input type="text"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label floating>Password</ion-label>
+          <ion-input type="password"></ion-input>
+        </ion-item>
+
+      </ion-list>
+
+      <div padding style="text-align: right;">
+        <ion-button color="secondary" block (click)="onStartLogin()">Sign In</ion-button>
+      </div>
+
+
+    </ion-card-content>
+  </ion-card>
+
   <ion-list>
-
     <ion-item>
-      <ion-label fixed>Username</ion-label>
-      <ion-input type="text"></ion-input>
+      <ion-label>Input</ion-label>
+      <ion-input></ion-input>
     </ion-item>
-
     <ion-item>
-      <ion-label fixed>Password</ion-label>
-      <ion-input type="password"></ion-input>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Radio</ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
     </ion-item>
-
   </ion-list>
+  
 
-  <div padding>
-    <ion-button color="secondary" block (click)="onStartLogin()" >Sign In</ion-button>
-  </div>
 
-</ion-content>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html
index 38b153e..e15a903 100644
--- a/src/app/tab2/tab2.page.html
+++ b/src/app/tab2/tab2.page.html
@@ -1,17 +1,67 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+     <!--  Tab 2-->
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+  
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+  
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+  
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+  
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+
+
+</ion-content>
\ No newline at end of file
diff --git a/src/app/tab3/tab3.page.html b/src/app/tab3/tab3.page.html
index 59ed981..fc9f8f9 100644
--- a/src/app/tab3/tab3.page.html
+++ b/src/app/tab3/tab3.page.html
@@ -21,20 +21,33 @@
   
   </ion-card>
 
-  <ion-item-group>
-    <ion-item-divider color="light">A</ion-item-divider>
-    <ion-item>Angola</ion-item>
-    <ion-item>Argentina</ion-item>
-   
-  </ion-item-group>
+  <ion-list>
+    <ion-item>
+      <ion-label>Input</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Radio</ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
+    </ion-item>
+
+    <ion-item (click)="onClickSettings()" >
+      <ion-label>Settings</ion-label>
+    </ion-item>
+
+  </ion-list>
+
+
+
 
-  <ion-item-group>
-    <ion-item-divider color="light">B</ion-item-divider>
-    <ion-item>Bangladesh</ion-item>
-    <ion-item>Belarus</ion-item>
-    <ion-item (click)="onClickSettings()" >Settings</ion-item>
-   
-  </ion-item-group>
 
   
 
diff --git a/src/app/tab3/tab3.page.scss b/src/app/tab3/tab3.page.scss
index 0f58a57..857520d 100644
--- a/src/app/tab3/tab3.page.scss
+++ b/src/app/tab3/tab3.page.scss
@@ -1,3 +1,16 @@
 ion-content ion-toolbar {
   --background: translucent;
-}
\ No newline at end of file
+
+
+ 
+
+} 
+  :root {
+    --ion-safe-area-top: 20px;
+    --ion-safe-area-bottom: 22px;
+  }
+ion-col > div {
+    background-color: #f7f7f7;
+    border: solid 1px #ddd;
+    padding: 10px;
+  }
\ No newline at end of file
diff --git a/src/app/users/settings/settings.page.html b/src/app/users/settings/settings.page.html
index 418106e..b7de858 100644
--- a/src/app/users/settings/settings.page.html
+++ b/src/app/users/settings/settings.page.html
@@ -5,5 +5,32 @@
 </ion-header>
 
 <ion-content>
-  <ion-button shape="round" fill="outline" (click)="onClickLogout()">Log out</ion-button>
+  
+  <ion-list>
+    <ion-item>
+      <ion-label>Input</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Radio</ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
+    </ion-item>
+
+    <ion-item (click)="onClickLogout()" style="background-color: lightsalmon;">
+      <ion-label>Logout</ion-label>
+    </ion-item>
+
+  </ion-list>
+
+
+
+  
 </ion-content>