diff --git a/lib/application/assets/path_assets.dart b/lib/application/assets/path_assets.dart
index 9bccc8c..f3fa70f 100644
--- a/lib/application/assets/path_assets.dart
+++ b/lib/application/assets/path_assets.dart
@@ -33,6 +33,10 @@ class PathAssets {
   static const String iconMoneyReceive = 'assets/icons/icon-money-receive.png';
   static const String iconCoins = 'assets/icons/icon-coins.png';
   static const String iconQuestion = 'assets/icons/icon-question.png';
+  static const String iconCake = 'assets/icons/icon-cake.png';
+  static const String iconHouse = 'assets/icons/icon-house.png';
+  static const String iconToga = 'assets/icons/icon-toga.png';
+  static const String iconCreatePlan = 'assets/icons/icon-create-plan.png';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';
diff --git a/lib/application/component/button/button_back.dart b/lib/application/component/button/back_button_view.dart
similarity index 79%
rename from lib/application/component/button/button_back.dart
rename to lib/application/component/button/back_button_view.dart
index 37e1a51..d20490f 100644
--- a/lib/application/component/button/button_back.dart
+++ b/lib/application/component/button/back_button_view.dart
@@ -2,10 +2,10 @@ import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:flutter/material.dart';
 
-class ButtonBack extends StatelessWidget {
+class BackButtonView extends StatelessWidget {
   final EdgeInsets? margin;
   final void Function()? onPress;
-  const ButtonBack({super.key, this.margin, this.onPress});
+  const BackButtonView({super.key, this.margin, this.onPress});
 
   @override
   Widget build(BuildContext context) {
@@ -16,7 +16,7 @@ class ButtonBack extends StatelessWidget {
           style: IconButton.styleFrom(
               backgroundColor: Colors.white,
               shape: const CircleBorder(
-                side: BorderSide(color: ColorPalette.slate200)
+                  side: BorderSide(color: ColorPalette.slate200)
               )
           ),
           onPressed: onPress ?? () => Navigator.pop(context),
diff --git a/lib/application/component/custom_app_bar/custom_app_bar.dart b/lib/application/component/custom_app_bar/custom_app_bar.dart
new file mode 100644
index 0000000..727455e
--- /dev/null
+++ b/lib/application/component/custom_app_bar/custom_app_bar.dart
@@ -0,0 +1,42 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+
+class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final Widget? leading;
+  final String title;
+  final List<Widget>? trailing;
+  final double height;
+
+  const CustomAppBar({
+    Key? key,
+    required this.height,
+    this.leading,
+    required this.title,
+    this.trailing,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 24),
+      decoration: BoxDecoration(
+          border: Border(bottom: BorderSide(color: ColorPalette.slate200))
+      ),
+      child: AppBar(
+        toolbarHeight: 70,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        automaticallyImplyLeading: false,
+        leadingWidth: 40,
+        leading: leading ?? BackButtonView(),
+        title: Text(title),
+        centerTitle: true,
+        actions: trailing ?? [],
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(height);
+}
diff --git a/lib/application/component/goal_investing_view.dart b/lib/application/component/goal_investing_view.dart
new file mode 100644
index 0000000..3b9627f
--- /dev/null
+++ b/lib/application/component/goal_investing_view.dart
@@ -0,0 +1,46 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:flutter/material.dart';
+
+class GoalInvest {
+  String icon;
+  String title;
+
+  GoalInvest(this.icon, this.title);
+}
+
+class GoalInvestingView extends StatelessWidget {
+  const GoalInvestingView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    List<GoalInvest> listGoalInvest = [
+      GoalInvest(PathAssets.iconToga, 'Education'),
+      GoalInvest(PathAssets.iconCake, 'Marriage'),
+      GoalInvest(PathAssets.iconHouse, 'Old age days'),
+      GoalInvest(PathAssets.iconCreatePlan, 'Create Plan'),
+    ];
+
+
+
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text('Your Goal in Investing'),
+            GestureDetector(
+              child: Icon(Icons.close_rounded),
+            ),
+          ],
+        ),
+        ...listGoalInvest.asMap().entries.map((e) {
+          return ListTile(
+            leading: Image.asset(e.value.icon),
+            title: Text(e.value.title),
+            trailing: Icon(Icons.chevron_right_rounded),
+          );
+        })
+      ],
+    );
+  }
+}
diff --git a/lib/application/component/numeric_pad/numeric_pad.dart b/lib/application/component/numeric_pad/numeric_pad.dart
new file mode 100644
index 0000000..797aa82
--- /dev/null
+++ b/lib/application/component/numeric_pad/numeric_pad.dart
@@ -0,0 +1,109 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class NumericPad extends StatelessWidget {
+  final Function(String) onNumberSelected;
+  final bool isPin;
+  const NumericPad({super.key, required this.onNumberSelected, this.isPin = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('1'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('2'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('3')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('4'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('5'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('6')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            isPin ? spaceWidget() : numberWidget('0'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            numberWidget(isPin ? '0' : '000'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            removeWidget()
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget dividerGradient(bool isHorizontal, AlignmentGeometry gradientFrom, AlignmentGeometry gradientTo, {bool fullColor = false}) {
+    return Container(
+      width: isHorizontal ? SizeConfig.width : 1,
+      height: isHorizontal ? 1 : SizeConfig.height * 0.11,
+      decoration: BoxDecoration(
+          gradient: LinearGradient(
+              colors: [
+                if(isHorizontal) ...[
+                  ColorPalette.slate200.withOpacity(0)
+                ],
+                ColorPalette.slate200,
+                fullColor ? ColorPalette.slate200 : ColorPalette.slate200.withOpacity(0)
+              ],
+              begin: gradientFrom,
+              end: gradientTo
+          )
+      ),
+    );
+  }
+
+  Widget spaceWidget() {
+    return Expanded(
+        child: SizedBox()
+    );
+  }
+
+  Widget numberWidget(String number) {
+    return Expanded(
+        child: GestureDetector(
+          onTap: () {
+            onNumberSelected(number);
+          },
+          child: Container(
+            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
+            child: Text(
+              number,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  fontSize: 28,
+                  fontWeight: FontWeight.bold
+              ),
+            ),
+          ),
+        )
+    );
+  }
+
+  Widget removeWidget() {
+    return Expanded(
+        child: Icon(
+          Icons.highlight_remove,
+          size: 28,
+        )
+    );
+  }
+}
diff --git a/lib/features/auth/login/view/login_view.dart b/lib/features/auth/login/view/login_view.dart
index 28da9f2..15ff05a 100644
--- a/lib/features/auth/login/view/login_view.dart
+++ b/lib/features/auth/login/view/login_view.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
@@ -61,7 +61,7 @@ class _LoginViewState extends State<LoginView> {
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                ButtonBack(),
+                BackButtonView(),
                 const Text('Sign In'),
                 SizedBox(
                   width: SizeConfig.width * 0.1,
diff --git a/lib/features/auth/login/view/phone_number_view.dart b/lib/features/auth/login/view/phone_number_view.dart
index c4c2ffb..ccb5224 100644
--- a/lib/features/auth/login/view/phone_number_view.dart
+++ b/lib/features/auth/login/view/phone_number_view.dart
@@ -1,6 +1,7 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/numeric_pad/numeric_pad.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
 import 'package:cims_apps/application/component/text_title/text_title.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -35,6 +36,7 @@ class PhoneNumberView extends StatelessWidget {
             inputFormatters: [
               FilteringTextInputFormatter.deny(RegExp(r'^0'))
             ],
+            contentPadding: EdgeInsets.all(1),
             prefixIcon: Container(
                 width: SizeConfig.width * .23,
                 padding:
@@ -108,6 +110,10 @@ class PhoneNumberView extends StatelessWidget {
                   )
               )
             ],
+          ),
+          NumericPad(
+            onNumberSelected: (p0) {
+            },
           )
         ],
       ),
diff --git a/lib/features/auth/registration/view/submission_data/data_bank/guide_screen.dart b/lib/features/auth/registration/view/submission_data/data_bank/guide_screen.dart
index 1320fcf..43b4027 100644
--- a/lib/features/auth/registration/view/submission_data/data_bank/guide_screen.dart
+++ b/lib/features/auth/registration/view/submission_data/data_bank/guide_screen.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
@@ -93,7 +93,7 @@ class GuideScreen extends StatelessWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const ButtonBack(),
+            const BackButtonView(),
             const Text('Guide'),
             SizedBox(
               width: SizeConfig.width * 0.1,
diff --git a/lib/features/auth/registration/view/submission_data/risk_profile/question_view.dart b/lib/features/auth/registration/view/submission_data/risk_profile/question_view.dart
index 2200106..5d38aee 100644
--- a/lib/features/auth/registration/view/submission_data/risk_profile/question_view.dart
+++ b/lib/features/auth/registration/view/submission_data/risk_profile/question_view.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -37,7 +37,7 @@ class _QuestionViewState extends State<QuestionView> {
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                ButtonBack(),
+                BackButtonView(),
                 const Text('Risk Profile', textAlign: TextAlign.center),
                 SizedBox(width: SizeConfig.width * 0.1)
               ],
diff --git a/lib/features/auth/registration/view/submission_data/risk_profile/results_view.dart b/lib/features/auth/registration/view/submission_data/risk_profile/results_view.dart
index 063e846..767d945 100644
--- a/lib/features/auth/registration/view/submission_data/risk_profile/results_view.dart
+++ b/lib/features/auth/registration/view/submission_data/risk_profile/results_view.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -26,7 +26,7 @@ class ResultsView extends StatelessWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            ButtonBack(),
+            BackButtonView(),
             const Text('Risk Profile', textAlign: TextAlign.center),
             SizedBox(
                 width: SizeConfig.width * 0.1
diff --git a/lib/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart b/lib/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart
index 1d20482..9103416 100644
--- a/lib/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart
+++ b/lib/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -22,7 +22,7 @@ class RiskProfileView extends StatelessWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            ButtonBack(),
+            BackButtonView(),
             const Text('Risk Profile', textAlign: TextAlign.center),
             SizedBox(width: SizeConfig.width * 0.1)
           ],
diff --git a/lib/features/bottom_navigation_view.dart b/lib/features/bottom_navigation_view.dart
index 53cd5b3..ffe57f5 100644
--- a/lib/features/bottom_navigation_view.dart
+++ b/lib/features/bottom_navigation_view.dart
@@ -1,5 +1,6 @@
 import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/plan_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
 import 'package:flutter/material.dart';
 
@@ -18,9 +19,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
     ///TODO: masukan pagenya dilistWidget ini
     List<Widget> listWidget = [
       HomeView(),
-      Container(
-        color: Colors.redAccent,
-      ),
+      PlanView(),
       Container(),
       PortofolioView(),
       Container(),
@@ -32,8 +31,8 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
         label: 'Home',
       ),
       BottomNavigationBarItem(
-        icon: Icon(Icons.search),
-        label: 'Search',
+        icon: Icon(Icons.file_open),
+        label: 'Plan',
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.compare_arrows),
@@ -51,20 +50,24 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
 
     return Scaffold(
       body: listWidget[_selectedIndex],
-      bottomNavigationBar: BottomNavigationBar(
-        onTap: (value) {
-          setState(() {
-            _selectedIndex = value;
-          });
-        },
-        currentIndex: _selectedIndex,
-        items: listNavigation,
-        type: BottomNavigationBarType.fixed,
-        showUnselectedLabels: true,
-        selectedItemColor: ColorPalette.primary,
-        unselectedItemColor: Colors.black,
-        selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
-        unselectedLabelStyle: const TextStyle(color: Colors.black),
+      bottomNavigationBar: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        child: BottomNavigationBar(
+          elevation: 0,
+          onTap: (value) {
+            setState(() {
+              _selectedIndex = value;
+            });
+          },
+          currentIndex: _selectedIndex,
+          items: listNavigation,
+          type: BottomNavigationBarType.fixed,
+          showUnselectedLabels: true,
+          selectedItemColor: ColorPalette.primary,
+          unselectedItemColor: Colors.black,
+          selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
+          unselectedLabelStyle: const TextStyle(color: Colors.black),
+        ),
       ),
     );
   }
diff --git a/lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart b/lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart
index 256f31c..0ea8805 100644
--- a/lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart
+++ b/lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart
@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_title/text_title.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -53,7 +53,7 @@ class _InvestTypeViewState extends State<InvestTypeView> {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      const ButtonBack(),
+                      const BackButtonView(),
                       TextTitle(title: widget.title, color: Colors.white),
                       SizedBox(
                         width: SizeConfig.width * 0.1,
diff --git a/lib/features/dashboard/dashboard_account/view/plan/plan_view.dart b/lib/features/dashboard/dashboard_account/view/plan/plan_view.dart
new file mode 100644
index 0000000..004462f
--- /dev/null
+++ b/lib/features/dashboard/dashboard_account/view/plan/plan_view.dart
@@ -0,0 +1,22 @@
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/goal_investing_view.dart';
+import 'package:flutter/material.dart';
+
+class PlanView extends StatelessWidget {
+  const PlanView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(height: 70, title: 'Investment Plan'),
+      body: SingleChildScrollView(
+        padding: EdgeInsets.all(24),
+        child: Column(
+          children: [
+            GoalInvestingView()
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/features/dashboard/dashboard_account/view/product/product_view.dart b/lib/features/dashboard/dashboard_account/view/product/product_view.dart
index 34d930d..3c30642 100644
--- a/lib/features/dashboard/dashboard_account/view/product/product_view.dart
+++ b/lib/features/dashboard/dashboard_account/view/product/product_view.dart
@@ -1,7 +1,7 @@
 import 'dart:math';
 
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
@@ -112,7 +112,7 @@ class _ProductViewState extends State<ProductView> {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      ButtonBack(),
+                      BackButtonView(),
                       Wrap(
                         spacing: 12,
                         children: [