diff --git a/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss b/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
index 526f7bcb1..d17434b63 100644
--- a/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
+++ b/addons/default/visiosoft/profile-module/resources/assets/css/profile-nav.scss
@@ -21,6 +21,7 @@
   transform: translateX(-100%);
   -webkit-transition: 300ms ease;
   transition: 300ms ease;
+  background-color: #FCFCFC;
   @media only screen and (min-width: 768px) {
     height: initial;
     position: initial;
@@ -29,7 +30,7 @@
     transform: initial;
   }
   @media only screen and (min-width: 992px) {
-    padding: 1.5rem 2.25rem;
+    padding: 1.5rem;
   }
 
   &.reveal {
@@ -90,4 +91,4 @@
   cursor: pointer;
   background: #000;
   opacity: .2;
-}
\ No newline at end of file
+}
diff --git a/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss b/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
index 969aa6755..c2a847e4f 100644
--- a/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
+++ b/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
@@ -1,4 +1,20 @@
 .profile-section {
+	h3 {
+		font-size: 1.25rem;
+		color: #707070;
+		@media only screen and (min-width: 768px) {
+			font-size: 1.5rem;
+		}
+
+		& + p {
+			color: #707070;
+			font-size: 13px;
+			@media only screen and (min-width: 768px) {
+				font-size: 15px;
+			}
+		}
+	}
+
 	.nav-tabs {
 		border-bottom: 1px solid #dee2e6;
 		padding-bottom: 10px;
@@ -63,7 +79,6 @@
 			width: 130px;
 			height: 130px;
 			object-fit: cover;
-			border-radius: 50%;
 			@media (max-width: 992px) {
 				display: flex;
 				justify-content: center;
@@ -116,22 +131,9 @@
 
 		form {
 			.new-profile-image {
-				position: relative;
-				bottom: 25px;
-				right: 30px;
+				top: -10px;
+				left: -10px;
 				cursor: pointer;
-
-				@media (max-width: 992px) {
-					bottom: 120px;
-					left: 100px;
-					top: auto;
-				}
-
-				@media (max-width: 576px) {
-					bottom: auto;
-					left: auto;
-					top: 10px;
-				}
 			}
 			.file-field {
 				visibility: hidden;
@@ -176,4 +178,4 @@
 			height: initial;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/addons/default/visiosoft/profile-module/resources/lang/en/field.php b/addons/default/visiosoft/profile-module/resources/lang/en/field.php
index 1f8b23fc6..948ee3f83 100644
--- a/addons/default/visiosoft/profile-module/resources/lang/en/field.php
+++ b/addons/default/visiosoft/profile-module/resources/lang/en/field.php
@@ -504,4 +504,6 @@ return [
     'undefined_member' => 'Undefined Member',
     'new_membership_report' => 'New Membership Report',
     'member_login_reports' => 'Member Login Reports',
+
+    'profile_instruction' => 'You can edit your profile information from this page.',
 ];
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig b/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
index c976af485..d8fceab49 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/partials/navigation.twig
@@ -2,7 +2,7 @@
     <img src="{{ img('visiosoft.module.profile::images/nav-menu.svg').url }}" alt="nav icon" id="navbarSideButton"
          class="ml-2">
 </div>
-<div class="col-10 col-sm-6 col-md-3 profile-navigation border rounded navbar-side bg-white" id="navbarSide">
+<div class="col-10 col-sm-6 col-md-3 profile-navigation border rounded navbar-side" id="navbarSide">
     <span class="px-3 mb-2 link-unstyled">
         {{ img('visiosoft.module.profile::images/interface.svg').data|raw }}
         <p>
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig b/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig
index f1475fe39..5f6081dfb 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/profile.twig
@@ -12,19 +12,25 @@
             {% set profile_photo = user.file ? user.file.make.url : img('visiosoft.module.profile::images/profile-default.png').url %}
 
             <div class="row px-3">
-
                 <!-- User Profile Form Section-->
-                <div class="col-md-12 bg-light profile-section pb-4 px-5">
+                <div class="col-md-12 bg-white profile-section pb-4 px-1 px-sm-5 border">
                     <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                         <div class="tab-pane fade show active" id="nav-profile" role="tabpanel"
                              aria-labelledby="nav-profile-tab">
+                            <div class="col-12 mb-4 mb-md-5 mt-md-3 px-3 px-md-0">
+                                <h3>{{ trans('visiosoft.module.profile::field.profile.name') }}</h3>
+                                <p>{{ trans('visiosoft.module.profile::field.profile_instruction') }}</p>
+                            </div>
+
                             <div>
                                 {% set userForm = form('userProfile').entry(user.id).get() %}
                                 {{ userForm.open()|raw }}
                                 <div class="mt-4 d-flex profile--desc flex-column flex-lg-row">
-                                    <div class="profile-image d-flex d-sm-block m-auto m-sm-0 mr-sm-3">
+                                    <div class="profile-image d-flex d-sm-block m-auto m-sm-0 mr-sm-3 position-relative">
                                         <img src="{{ profile_photo }}">
-                                        <i class="new-profile-image">{{ img('visiosoft.module.profile::images/camera.svg').data|raw }}</i>
+                                        <div class="new-profile-image position-absolute">
+                                            {{ img('visiosoft.module.profile::images/camera.svg').data|raw }}
+                                        </div>
                                         {% if setting_value('visiosoft.module.profile::upload_avatar') %}
                                             <div class="form-group">
                                                 {{ userForm.fields.file|raw }}
@@ -91,4 +97,4 @@
 
     {{ asset_script("visiosoft.module.profile::assets/js/education.js") }}
     {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }}
-{% endblock %}
\ No newline at end of file
+{% endblock %}