diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 87fa218..4136ac2 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,8 +3,8 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'home',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+    path: 'cover',
+    loadChildren: () => import('./cover/cover.module').then( m => m.CoverPageModule)
   },
   {
     path: 'pemeriksaan',
@@ -15,14 +15,26 @@ const routes: Routes = [
     redirectTo: 'home',
     pathMatch: 'full'
   },
-  {
-    path: 'pemeriksaan',
-    loadChildren: () => import('./pemeriksaan/pemeriksaan.module').then( m => m.PemeriksaanPageModule)
-  },
   {
     path: 'indikator',
     loadComponent: () => import('./indikator/indikator.page').then((m) => m.IndikatorPage),
   },
+  {
+    path: 'cover',
+    loadChildren: () => import('./cover/cover.module').then( m => m.CoverPageModule)
+  },
+  {
+    path: 'identitas',
+    loadChildren: () => import('./identitas/identitas.module').then( m => m.IdentitasPageModule)
+  },
+  {
+    path: 'tips',
+    loadChildren: () => import('./tips/tips.module').then( m => m.TipsPageModule)
+  },
+  {
+    path: 'tentang-kami',
+    loadChildren: () => import('./tentang-kami/tentang-kami.module').then( m => m.TentangKamiPageModule)
+  },
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 13b9677..5b9f2b5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,20 @@
 <ion-app>
-  <ion-router-outlet></ion-router-outlet>
+  <ion-split-pane contentId="main-content">
+    <ion-menu contentId="main-content" type="overlay">
+      <ion-content>
+        <ion-list id="inbox-list">
+          <ion-list-header>Inbox</ion-list-header>
+          <ion-note>hi&#64;ionicframework.com</ion-note>
+
+          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
+            <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
+              <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
+              <ion-label>{{ p.title }}</ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet id="main-content"></ion-router-outlet>
+  </ion-split-pane>
 </ion-app>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..cb4fb5e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,119 @@
+ion-menu ion-content {
+    --background: var(--ion-item-background, var(--ion-background-color, #fff));
+  }
+  
+  ion-menu.md ion-content {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    --padding-top: 20px;
+    --padding-bottom: 20px;
+  }
+  
+  ion-menu.md ion-list {
+    padding: 20px 0;
+  }
+  
+  ion-menu.md ion-note {
+    margin-bottom: 30px;
+  }
+  
+  ion-menu.md ion-list-header,
+  ion-menu.md ion-note {
+    padding-left: 10px;
+  }
+  
+  ion-menu.md ion-list#inbox-list {
+    border-bottom: 1px solid var(--ion-background-color-step-150, #d7d8da);
+  }
+  
+  ion-menu.md ion-list#inbox-list ion-list-header {
+    font-size: 22px;
+    font-weight: 600;
+  
+    min-height: 20px;
+  }
+  
+  ion-menu.md ion-list#labels-list ion-list-header {
+    font-size: 16px;
+  
+    margin-bottom: 18px;
+  
+    color: #757575;
+  
+    min-height: 26px;
+  }
+  
+  ion-menu.md ion-item {
+    --padding-start: 10px;
+    --padding-end: 10px;
+    border-radius: 4px;
+  }
+  
+  ion-menu.md ion-item.selected {
+    --background: rgba(var(--ion-color-primary-rgb), 0.14);
+  }
+  
+  ion-menu.md ion-item.selected ion-icon {
+    color: var(--ion-color-primary);
+  }
+  
+  ion-menu.md ion-item ion-icon {
+    color: #616e7e;
+  }
+  
+  ion-menu.md ion-item ion-label {
+    font-weight: 500;
+  }
+  
+  ion-menu.ios ion-content {
+    --padding-bottom: 20px;
+  }
+  
+  ion-menu.ios ion-list {
+    padding: 20px 0 0 0;
+  }
+  
+  ion-menu.ios ion-note {
+    line-height: 24px;
+    margin-bottom: 20px;
+  }
+  
+  ion-menu.ios ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --min-height: 50px;
+  }
+  
+  ion-menu.ios ion-item.selected ion-icon {
+    color: var(--ion-color-primary);
+  }
+  
+  ion-menu.ios ion-item ion-icon {
+    font-size: 24px;
+    color: #73849a;
+  }
+  
+  ion-menu.ios ion-list#labels-list ion-list-header {
+    margin-bottom: 8px;
+  }
+  
+  ion-menu.ios ion-list-header,
+  ion-menu.ios ion-note {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  
+  ion-menu.ios ion-note {
+    margin-bottom: 8px;
+  }
+  
+  ion-note {
+    display: inline-block;
+    font-size: 16px;
+  
+    color: var(--ion-color-medium-shade);
+  }
+  
+  ion-item.selected {
+    --color: var(--ion-color-primary);
+  }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 913de3d..93a28f0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,13 @@ import { Component } from '@angular/core';
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
+  public appPages = [
+    { title: 'Home', url: '/cover', icon: 'home' },
+    { title: 'Identitas', url: '/identitas', icon: 'people' },
+    { title: 'Pengukuran', url: '/pemeriksaan', icon: 'thermometer' },
+    { title: 'Grafik', url: '/indikator', icon: 'stats-chart' },
+    { title: 'Tips', url: '/tips', icon: 'bulb' },
+    { title: 'Tentang Kami', url: '/tentang-kami', icon: 'information-circle' },
+  ];
   constructor() {}
 }
diff --git a/src/app/cover/cover-routing.module.ts b/src/app/cover/cover-routing.module.ts
new file mode 100644
index 0000000..6412e55
--- /dev/null
+++ b/src/app/cover/cover-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CoverPage } from './cover.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CoverPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CoverPageRoutingModule {}
diff --git a/src/app/cover/cover.module.ts b/src/app/cover/cover.module.ts
new file mode 100644
index 0000000..76b58ca
--- /dev/null
+++ b/src/app/cover/cover.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CoverPageRoutingModule } from './cover-routing.module';
+
+import { CoverPage } from './cover.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CoverPageRoutingModule
+  ],
+  declarations: [CoverPage]
+})
+export class CoverPageModule {}
diff --git a/src/app/cover/cover.page.html b/src/app/cover/cover.page.html
new file mode 100644
index 0000000..d56ee37
--- /dev/null
+++ b/src/app/cover/cover.page.html
@@ -0,0 +1,25 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Beranda</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Beranda</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title class="ion-text-center">
+        Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+</ion-content>
\ No newline at end of file
diff --git a/src/app/cover/cover.page.scss b/src/app/cover/cover.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/cover/cover.page.spec.ts b/src/app/cover/cover.page.spec.ts
new file mode 100644
index 0000000..0ed6bc0
--- /dev/null
+++ b/src/app/cover/cover.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoverPage } from './cover.page';
+
+describe('CoverPage', () => {
+  let component: CoverPage;
+  let fixture: ComponentFixture<CoverPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoverPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/cover/cover.page.ts b/src/app/cover/cover.page.ts
new file mode 100644
index 0000000..09bc749
--- /dev/null
+++ b/src/app/cover/cover.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cover',
+  templateUrl: './cover.page.html',
+  styleUrls: ['./cover.page.scss'],
+})
+export class CoverPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
deleted file mode 100644
index 29c3f60..0000000
--- a/src/app/home/home-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HomePage } from './home.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: HomePage,
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HomePageRoutingModule {}
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
deleted file mode 100644
index 685f47b..0000000
--- a/src/app/home/home.page.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-
-.custom-margin {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-.center-button-container {
-  display: flex;
-  justify-content: center;
-  padding: 10px;  /* Add padding to ensure it doesn't stick to the bottom */
-}
\ No newline at end of file
diff --git a/src/app/home/home.page.spec.ts b/src/app/home/home.page.spec.ts
deleted file mode 100644
index 26eb973..0000000
--- a/src/app/home/home.page.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { HomePage } from './home.page';
-
-describe('HomePage', () => {
-  let component: HomePage;
-  let fixture: ComponentFixture<HomePage>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [HomePage],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(HomePage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
deleted file mode 100644
index 1e48a47..0000000
--- a/src/app/home/home.page.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-home',
-  templateUrl: 'home.page.html',
-  styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
-  constructor(private router: Router) { }
-  goToNewPage() {
-    this.router.navigate(['/pemeriksaan']); 
-  }
-
-}
diff --git a/src/app/identitas/identitas-routing.module.ts b/src/app/identitas/identitas-routing.module.ts
new file mode 100644
index 0000000..bf16589
--- /dev/null
+++ b/src/app/identitas/identitas-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IdentitasPage } from './identitas.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: IdentitasPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IdentitasPageRoutingModule {}
diff --git a/src/app/identitas/identitas.module.ts b/src/app/identitas/identitas.module.ts
new file mode 100644
index 0000000..9c12e4a
--- /dev/null
+++ b/src/app/identitas/identitas.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { IdentitasPageRoutingModule } from './identitas-routing.module';
+
+import { IdentitasPage } from './identitas.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    IdentitasPageRoutingModule
+  ],
+  declarations: [IdentitasPage]
+})
+export class IdentitasPageModule {}
diff --git a/src/app/home/home.page.html b/src/app/identitas/identitas.page.html
similarity index 90%
rename from src/app/home/home.page.html
rename to src/app/identitas/identitas.page.html
index a9d4564..3ecceee 100644
--- a/src/app/home/home.page.html
+++ b/src/app/identitas/identitas.page.html
@@ -1,19 +1,18 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Blank
-    </ion-title>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Identitas</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Biodata</ion-title>
+      <ion-title size="large">Identitas</ion-title>
     </ion-toolbar>
   </ion-header>
-
- 
   <ion-list>
     <ion-item>
       <ion-label position="stacked">Nama</ion-label>
@@ -87,8 +86,6 @@
       <ion-label position="stacked">Tanggal Pengisian Buku Pertamakali</ion-label>
       <ion-input type="date"></ion-input>
     </ion-item>
-    <div class="center-button-container">
-      <ion-button color="primary" (click)="goToNewPage()">Selanjutnya</ion-button>
-    </div>
+    <ion-button expand="block" color="primary">Simpan</ion-button>
   </ion-list>
 </ion-content>
diff --git a/src/app/identitas/identitas.page.scss b/src/app/identitas/identitas.page.scss
new file mode 100644
index 0000000..d80f96c
--- /dev/null
+++ b/src/app/identitas/identitas.page.scss
@@ -0,0 +1,37 @@
+#container {
+    text-align: center;
+  
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
+  
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
+  
+    color: #8c8c8c;
+  
+    margin: 0;
+  }
+  
+  #container a {
+    text-decoration: none;
+  }
+  
+  .custom-margin {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  .center-button-container {
+    display: flex;
+    justify-content: center;
+    padding: 10px;  /* Add padding to ensure it doesn't stick to the bottom */
+  }
\ No newline at end of file
diff --git a/src/app/identitas/identitas.page.spec.ts b/src/app/identitas/identitas.page.spec.ts
new file mode 100644
index 0000000..7606775
--- /dev/null
+++ b/src/app/identitas/identitas.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IdentitasPage } from './identitas.page';
+
+describe('IdentitasPage', () => {
+  let component: IdentitasPage;
+  let fixture: ComponentFixture<IdentitasPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdentitasPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/identitas/identitas.page.ts b/src/app/identitas/identitas.page.ts
new file mode 100644
index 0000000..e0386cc
--- /dev/null
+++ b/src/app/identitas/identitas.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-identitas',
+  templateUrl: './identitas.page.html',
+  styleUrls: ['./identitas.page.scss'],
+})
+export class IdentitasPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/indikator/indikator.page.html b/src/app/indikator/indikator.page.html
index 5985f53..98fe41e 100644
--- a/src/app/indikator/indikator.page.html
+++ b/src/app/indikator/indikator.page.html
@@ -1,11 +1,8 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Charts
-    </ion-title>
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-title>Grafik</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
   <ion-card>
     <ion-card-title class="ion-padding-start">Line Chart</ion-card-title>
diff --git a/src/app/pemeriksaan/pemeriksaan.page.html b/src/app/pemeriksaan/pemeriksaan.page.html
index ff6e852..f99498b 100644
--- a/src/app/pemeriksaan/pemeriksaan.page.html
+++ b/src/app/pemeriksaan/pemeriksaan.page.html
@@ -1,13 +1,16 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>Pemeriksaan</ion-title>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Pengukuran</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Pemeriksaan</ion-title>
+      <ion-title size="large">Pengukuran</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-list>
@@ -86,7 +89,7 @@
       <ion-textarea placeholder="Tuliskan Keluhan atau Perasaan"></ion-textarea>
     </ion-item>
 
-    <ion-button expand="block" (click)="goToNewPage()" color="primary">Submit</ion-button>
+    <ion-button expand="block" color="primary">Simpan</ion-button>
   </ion-list>
 </ion-content>
 
diff --git a/src/app/tentang-kami/tentang-kami-routing.module.ts b/src/app/tentang-kami/tentang-kami-routing.module.ts
new file mode 100644
index 0000000..bba9eec
--- /dev/null
+++ b/src/app/tentang-kami/tentang-kami-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TentangKamiPage } from './tentang-kami.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TentangKamiPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TentangKamiPageRoutingModule {}
diff --git a/src/app/tentang-kami/tentang-kami.module.ts b/src/app/tentang-kami/tentang-kami.module.ts
new file mode 100644
index 0000000..f5f245c
--- /dev/null
+++ b/src/app/tentang-kami/tentang-kami.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TentangKamiPageRoutingModule } from './tentang-kami-routing.module';
+
+import { TentangKamiPage } from './tentang-kami.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TentangKamiPageRoutingModule
+  ],
+  declarations: [TentangKamiPage]
+})
+export class TentangKamiPageModule {}
diff --git a/src/app/tentang-kami/tentang-kami.page.html b/src/app/tentang-kami/tentang-kami.page.html
new file mode 100644
index 0000000..d5b47c7
--- /dev/null
+++ b/src/app/tentang-kami/tentang-kami.page.html
@@ -0,0 +1,61 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Tentang Kami</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tentang Kami</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        Deskripsi Sistem
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        <h2>Created by</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="person" slot="start"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>Email</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="at-outline" slot="start"></ion-icon>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>No. Telepon</h2>
+        <p>-</p>
+      </ion-label>
+      <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
+    </ion-item>
+  </ion-list>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/tentang-kami/tentang-kami.page.scss b/src/app/tentang-kami/tentang-kami.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/tentang-kami/tentang-kami.page.spec.ts b/src/app/tentang-kami/tentang-kami.page.spec.ts
new file mode 100644
index 0000000..e4e68b1
--- /dev/null
+++ b/src/app/tentang-kami/tentang-kami.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TentangKamiPage } from './tentang-kami.page';
+
+describe('TentangKamiPage', () => {
+  let component: TentangKamiPage;
+  let fixture: ComponentFixture<TentangKamiPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TentangKamiPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/tentang-kami/tentang-kami.page.ts b/src/app/tentang-kami/tentang-kami.page.ts
new file mode 100644
index 0000000..d828a49
--- /dev/null
+++ b/src/app/tentang-kami/tentang-kami.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tentang-kami',
+  templateUrl: './tentang-kami.page.html',
+  styleUrls: ['./tentang-kami.page.scss'],
+})
+export class TentangKamiPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/tips/tips-routing.module.ts b/src/app/tips/tips-routing.module.ts
new file mode 100644
index 0000000..9f0adc9
--- /dev/null
+++ b/src/app/tips/tips-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TipsPage } from './tips.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TipsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TipsPageRoutingModule {}
diff --git a/src/app/home/home.module.ts b/src/app/tips/tips.module.ts
similarity index 58%
rename from src/app/home/home.module.ts
rename to src/app/tips/tips.module.ts
index a554f01..42c19a6 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/tips/tips.module.ts
@@ -1,19 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
-import { HomePage } from './home.page';
 
-import { HomePageRoutingModule } from './home-routing.module';
+import { IonicModule } from '@ionic/angular';
 
+import { TipsPageRoutingModule } from './tips-routing.module';
+
+import { TipsPage } from './tips.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    HomePageRoutingModule
+    TipsPageRoutingModule
   ],
-  declarations: [HomePage]
+  declarations: [TipsPage]
 })
-export class HomePageModule {}
+export class TipsPageModule {}
diff --git a/src/app/tips/tips.page.html b/src/app/tips/tips.page.html
new file mode 100644
index 0000000..31bf389
--- /dev/null
+++ b/src/app/tips/tips.page.html
@@ -0,0 +1,47 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Tips</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tips</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        TRIK AGAR SEHAT BUGAR SETIAP HARI
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        TRIK SEHAT BAGI PENDERITA DIABETES MELLITUS (DM) / KENCING MANIS
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-content>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
+      </p>
+    </ion-card-content>
+  </ion-card>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/tips/tips.page.scss b/src/app/tips/tips.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/tips/tips.page.spec.ts b/src/app/tips/tips.page.spec.ts
new file mode 100644
index 0000000..47ccf95
--- /dev/null
+++ b/src/app/tips/tips.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TipsPage } from './tips.page';
+
+describe('TipsPage', () => {
+  let component: TipsPage;
+  let fixture: ComponentFixture<TipsPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TipsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/tips/tips.page.ts b/src/app/tips/tips.page.ts
new file mode 100644
index 0000000..2a06005
--- /dev/null
+++ b/src/app/tips/tips.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tips',
+  templateUrl: './tips.page.html',
+  styleUrls: ['./tips.page.scss'],
+})
+export class TipsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}