diff --git a/ssi_partner_portal/__manifest__.py b/ssi_partner_portal/__manifest__.py
index b777553..a626d96 100644
--- a/ssi_partner_portal/__manifest__.py
+++ b/ssi_partner_portal/__manifest__.py
@@ -11,6 +11,7 @@
     "application": True,
     "depends": [
         "portal",
+        "web",
         "ssi_partner",
     ],
     "data": [
diff --git a/ssi_partner_portal/controllers/portal.py b/ssi_partner_portal/controllers/portal.py
index 9d58d57..654c761 100644
--- a/ssi_partner_portal/controllers/portal.py
+++ b/ssi_partner_portal/controllers/portal.py
@@ -2,12 +2,21 @@
 # Copyright 2023 PT. Simetri Sinergi Indonesia
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
-from odoo.http import request, route
+import base64
+import requests
 
+from odoo import tools
+from odoo.http import request, route
 from odoo.addons.portal.controllers import portal
 from odoo.addons.portal.controllers.portal import CustomerPortal
 
-CustomerPortal.OPTIONAL_BILLING_FIELDS.append("mobile")
+CustomerPortal.OPTIONAL_BILLING_FIELDS += [
+    "mobile",
+    "gender",
+    "birth_city",
+    "birthdate_date",
+    "image_1920",
+]
 
 
 class CustomerPortalExtended(CustomerPortal):
@@ -120,3 +129,19 @@ def remove_bank_account(self, **post):
         )
         bank_account_id.unlink()
         return request.redirect("/my/bank_accounts")
+
+    def convert_url_to_base64(self, url):
+        return base64.b64encode(requests.get(url).content)
+
+    @route(['/my/account'], type='http', auth='user', website=True)
+    def account(self, redirect=None, **post):
+        if 'input_image_1920' in post:
+            post.pop('input_image_1920')
+            if post.get('image_1920'):
+                if 'base64' in post['image_1920']:
+                    image_vals = post['image_1920'].split('base64,')
+                    post['image_1920'] = image_vals[-1]
+                else:
+                    post['image_1920'] = self.convert_url_to_base64(url=post['image_1920'])
+        res = super().account(redirect=redirect, **post)
+        return res
diff --git a/ssi_partner_portal/static/src/css/bootstrap.css b/ssi_partner_portal/static/src/css/bootstrap.css
new file mode 100644
index 0000000..c635ffd
--- /dev/null
+++ b/ssi_partner_portal/static/src/css/bootstrap.css
@@ -0,0 +1,5 @@
+.col-image {
+    padding-right: 15px;
+    padding-left: 15px;
+    position: relative;
+}
diff --git a/ssi_partner_portal/views/assets.xml b/ssi_partner_portal/views/assets.xml
index 41a7be1..f05faed 100644
--- a/ssi_partner_portal/views/assets.xml
+++ b/ssi_partner_portal/views/assets.xml
@@ -12,6 +12,11 @@
                 type="text/scss"
                 href="/ssi_partner_portal/static/src/scss/portal.scss"
             />
+            <link
+                href="/ssi_partner_portal/static/src/css/bootstrap.css"
+                rel="stylesheet"
+                type="text/css"
+            />
         </xpath>
     </template>
 </odoo>
diff --git a/ssi_partner_portal/views/portal_templates.xml b/ssi_partner_portal/views/portal_templates.xml
index 91f02a8..1d4dadd 100644
--- a/ssi_partner_portal/views/portal_templates.xml
+++ b/ssi_partner_portal/views/portal_templates.xml
@@ -4,6 +4,70 @@
      License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->
 <odoo>
     <template id="portal_my_details" inherit_id="portal.portal_my_details">
+        <xpath expr="//div[hasclass('col-lg-8')]/div/div[2]" position="before">
+            <div
+                t-attf-class="form-group #{error.get('input_image_1920') and 'o_has_error' or ''} col-image"
+            >
+                <input
+                    type="file"
+                    name="input_image_1920"
+                    accept="image/*"
+                    onchange="setShowImage()"
+                />
+                <input
+                    type="hidden"
+                    name="image_1920"
+                    t-att-src="avatar_source_default"
+                />
+                <br/>
+                <br/>
+                <t t-set="avatar_source_default" name="avatar_source_default" t-value="'/web/static/src/img/placeholder.png'"/>
+                <t t-if="partner.image_1920">
+                    <t t-set="avatar_source" t-value="image_data_uri(partner.image_1920)"/>
+                </t>
+                <t t-else="">
+                    <t t-set="avatar_source" t-value="avatar_source_default"/>
+                </t>
+                <img
+                    name="default_image_1920"
+                    t-att-src="avatar_source_default"
+                    hidden="1"
+                />
+                <img
+                    name="show_image_1920"
+                    t-att-src="avatar_source"
+                    alt="Photo"
+                    width="100px"
+                    height="100px"
+                />
+                <br/>
+                <a class="btn btn-link btn-sm" href="#" onclick="removeImage()">Remove Image</a>
+            </div>
+            <script type="text/javascript">
+                const setShowImage = async (e) => {
+                    debugger;
+                    var input_image_1920 = document.getElementsByName("input_image_1920")[0].files[0];
+                    var reader = new FileReader();
+                    if (input_image_1920){
+                        await reader.readAsDataURL(input_image_1920);
+                        document.getElementsByName("show_image_1920")[0].src = URL.createObjectURL(input_image_1920);
+                        reader.onload = function () {
+                            document.getElementsByName("image_1920")[0].value = reader.result;
+                        };
+                    };
+                };
+                function removeImage(){
+                    debugger;
+                    var avatar_source_default = document.getElementsByName("default_image_1920")[0].src;
+                    document.getElementsByName("show_image_1920")[0].src = avatar_source_default;
+                    document.getElementsByName("image_1920")[0].value = avatar_source_default;
+                    document.getElementsByName("input_image_1920")[0].value = null;
+                };
+            </script>
+            <div
+                t-attf-class="form-group col-xl-6"
+            />
+        </xpath>
         <xpath expr="//div[hasclass('col-lg-8')]/div/div[7]" position="after">
             <div
                 t-attf-class="form-group #{error.get('mobile') and 'o_has_error' or ''} col-xl-6"
@@ -16,6 +80,51 @@
                     t-att-value="mobile or partner.mobile"
                 />
             </div>
+            <div
+                t-attf-class="form-group #{error.get('gender') and 'o_has_error' or ''} col-xl-6"
+            >
+                <label for="gender">Gender:</label>
+                <select
+                        class="form-control"
+                        name="gender"
+                        t-attf-class="form-control #{error.get('gender') and 'is-invalid' or ''}">
+                    <option value="" />
+                    <option
+                        value="male"
+                        t-att-selected="partner.gender == 'male'"
+                    >Male</option>
+                    <option
+                        value="female"
+                        t-att-selected="partner.gender == 'female'"
+                    >Female</option>
+                    <option
+                        value="other"
+                        t-att-selected="partner.gender == 'other'"
+                    >Other</option>
+                </select>
+            </div>
+            <div
+                t-attf-class="form-group #{error.get('birthdate_date') and 'o_has_error' or ''} col-xl-6"
+            >
+                <label class="col-form-label" for="birthdate_date">Date of Birth</label>
+                <input
+                    type="date"
+                    name="birthdate_date"
+                    t-attf-class="form-control #{error.get('birthdate_date') and 'is-invalid' or ''}"
+                    t-att-value="birthdate_date or partner.birthdate_date"
+                />
+            </div>
+            <div
+                t-attf-class="form-group #{error.get('birth_city') and 'o_has_error' or ''} col-xl-6"
+            >
+                <label class="col-form-label" for="birth_city">Place of Birth</label>
+                <input
+                    type="text"
+                    name="birth_city"
+                    t-attf-class="form-control #{error.get('birth_city') and 'is-invalid' or ''}"
+                    t-att-value="birth_city or partner.birth_city"
+                />
+            </div>
         </xpath>
     </template>
     <template id="portal_layout" inherit_id="portal.portal_layout">