diff --git a/app/controllers/profile.js b/app/controllers/profile.js
index ae3ec08d..d9bbd6f4 100644
--- a/app/controllers/profile.js
+++ b/app/controllers/profile.js
@@ -9,6 +9,15 @@ const BASE_URL = ENV.BASE_API_URL;
 export default class ProfileController extends Controller {
   @service toast;
   @service router;
+  get isDev() {
+    if (
+      this.router.currentRoute &&
+      this.router.currentRoute.queryParams.dev === 'true'
+    ) {
+      return this.router.currentRoute.queryParams.dev;
+    }
+    return false;
+  }
   get imageUploadUrl() {
     return `${BASE_URL}/users/picture`;
   }
diff --git a/app/styles/profile.css b/app/styles/profile.css
index f518b6b6..d2459cd7 100644
--- a/app/styles/profile.css
+++ b/app/styles/profile.css
@@ -40,7 +40,7 @@
 }
 
 .profile-page-error {
-  text-align: center; 
+  text-align: center;
   color: red;
 }
 
@@ -91,6 +91,7 @@
   aspect-ratio: 1;
   margin: auto;
   text-align: center;
+  position: relative;
 }
 
 .profile-form .user__pic {
@@ -101,6 +102,18 @@
 
 .edit-btn {
   padding: 0;
+  margin-top: 0.5rem;
+  color: var(--profile-edit-btn-clr);
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.profile-edit-button {
+  padding: 0.5rem;
+  border-radius: 100%;
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
   font-size: 1rem;
   margin-top: 0.5rem;
   color: var(--profile-edit-btn-clr);
diff --git a/app/templates/profile.hbs b/app/templates/profile.hbs
index 0132af9d..6fd68d70 100644
--- a/app/templates/profile.hbs
+++ b/app/templates/profile.hbs
@@ -9,16 +9,23 @@
         <img
           class='user__pic'
           src={{'dummyProfilePicture.png'}}
-          alt='user profile '
+          alt='user profile'
         />
       {{/if}}
-      <Button
-        @onClick={{this.handleShowEditProfilePictureModal}}
-        @class='edit-btn btn'
-        @data-test-btn='edit'
-      >
-        Update Picture
-      </Button>
+
+      {{#if this.isDev}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='profile-edit-button '
+         @data-test-btn='edit'>
+          <FaIcon @icon="edit" />
+        </Button>
+      {{else}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='edit-btn btn'
+         @data-test-btn='edit'>
+          Update Picture
+        </Button>
+        {{/if}}
     </div>
     <div class='profile-form-grid'>
       {{#if (get @model 'isDeveloper')}}
diff --git a/tests/integration/components/profile-field-test.js b/tests/integration/components/profile-field-test.js
index c1287b9a..17d62663 100644
--- a/tests/integration/components/profile-field-test.js
+++ b/tests/integration/components/profile-field-test.js
@@ -13,8 +13,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
       />
     `);
@@ -35,8 +35,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @showError={{this.showError}} 
+      <ProfileField
+        @showError={{this.showError}}
         @errorMessage={{this.errorMessage}}
       />
     `);
@@ -53,8 +53,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
         @isDeveloper={{this.isDeveloper}}
       />
@@ -80,8 +80,8 @@ module('Integration | Component | profile-field', function (hooks) {
     });
 
     await render(hbs`
-      <ProfileField 
-        @label={{this.label}} 
+      <ProfileField
+        @label={{this.label}}
         @icon_url={{this.icon_url}}
         @isDeveloper={{this.isDeveloper}}
       />
diff --git a/tests/integration/components/profile-test.js b/tests/integration/components/profile-test.js
new file mode 100644
index 00000000..303a90b8
--- /dev/null
+++ b/tests/integration/components/profile-test.js
@@ -0,0 +1,57 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, settled, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | profile-component', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('button appearance based on isDev property', async function (assert) {
+    this.set('handleShowEditProfilePictureModal', () => {
+      this.set('showEditProfilePictureModal', true);
+    });
+
+    this.set('isDev', true);
+
+    await render(hbs`
+      {{#if this.isDev}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='profile-edit-button '
+         @data-test-btn='edit'>
+          <FaIcon @icon="edit" />
+        </Button>
+      {{else}}
+        <Button @onClick={{this.handleShowEditProfilePictureModal}}
+         @class='edit-btn btn'
+         @data-test-btn='edit'>
+          Update Picture
+        </Button>
+      {{/if}}
+    `);
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button');
+
+    await click('[data-test-btn="edit"]');
+
+    assert.ok(
+      this.showEditProfilePictureModal,
+      'Modal should be shown after clicking the button'
+    );
+
+    this.set('isDev', false);
+
+    await settled();
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('edit-btn');
+    assert.dom('[data-test-btn="edit"]').hasText('Update Picture');
+
+    await click('[data-test-btn="edit"]');
+
+    assert.ok(
+      this.showEditProfilePictureModal,
+      'Modal should be shown after clicking the button'
+    );
+  });
+});
diff --git a/tests/unit/routes/profile-test.js b/tests/unit/routes/profile-test.js
index b6b51b9c..a1f4db1c 100644
--- a/tests/unit/routes/profile-test.js
+++ b/tests/unit/routes/profile-test.js
@@ -20,4 +20,16 @@ module('Unit | Route | profile', function (hooks) {
     assert.dom('[data-test-modal="image-upload"]').exists();
     assert.dom('[data-test-btn="browse"]').exists();
   });
+  test('button appearance based on dev query param', async (assert) => {
+    await visit('/profile?dev=true');
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('profile-edit-button');
+
+    await visit('/profile?dev=false');
+
+    assert.dom('[data-test-btn="edit"]').exists();
+    assert.dom('[data-test-btn="edit"]').hasClass('edit-btn');
+    assert.dom('[data-test-btn="edit"]').hasText('Update Picture');
+  });
 });