diff --git a/addons/default/visiosoft/profile-module/resources/assets/css/profile.css b/addons/default/visiosoft/profile-module/resources/assets/css/profile.css
deleted file mode 100644
index 9ccc05938..000000000
--- a/addons/default/visiosoft/profile-module/resources/assets/css/profile.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.profile-section .nav-link.active {
-    background-color: #343a40 !important;
-    border-color: #343a40 #343a40 #343a40;
-    color: white!important;
-}
\ 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
new file mode 100644
index 000000000..cf8f444de
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/assets/css/profile.scss
@@ -0,0 +1,92 @@
+.profile-section .nav-link.active {
+    background-color: #343a40 !important;
+    border-color: #343a40 #343a40 #343a40;
+    color: white!important;
+}
+
+.profile-nav-toggler {
+    color: rgba(0,0,0,.5);
+    border: 1px solid rgba(0,0,0,.1);
+    padding: .25rem .75rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    background-color: transparent;
+    border-radius: .25rem;
+}
+
+.profile-navigation {
+    padding: 1.5rem .25rem;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 9999;
+    -webkit-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+    -webkit-transition: 300ms ease;
+    transition: 300ms ease;
+    @media only screen and (min-width: 768px) {
+        padding: 1.5rem 2.25rem;
+        height: initial;
+        position: initial;
+        -webkit-transform: initial;
+        -ms-transform: initial;
+        transform: initial;
+    }
+
+    &.reveal {
+        -webkit-transform: translateX(0%);
+        -ms-transform: translateX(0%);
+        transform: translateX(0%);
+        -webkit-transition: 300ms ease;
+        transition: 300ms ease;
+    }
+
+    a {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1.25rem;
+
+        &.active, &:hover {
+            cursor: pointer;
+
+            p {
+                color: #707070;
+                font-weight: 500;
+            }
+        }
+
+        &:first-child {
+            p {
+                font-weight: 500;
+                color: #707070;
+            }
+        }
+
+        img {
+            margin-right: .75rem;
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        p {
+            color: #A1A1A1;
+            margin-bottom: 0;
+        }
+    }
+}
+
+.overlay {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+    background: #000;
+    opacity: .2;
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/addons/default/visiosoft/profile-module/resources/assets/js/profile-nav.js b/addons/default/visiosoft/profile-module/resources/assets/js/profile-nav.js
new file mode 100644
index 000000000..b9adb169d
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/assets/js/profile-nav.js
@@ -0,0 +1,8 @@
+$('#navbarSideButton').on('click', function() {
+    $('#navbarSide').addClass('reveal');
+    $('.overlay').show();
+});
+$('.overlay').on('click', function(){
+    $('#navbarSide').removeClass('reveal');
+    $('.overlay').hide();
+});
diff --git a/addons/default/visiosoft/profile-module/resources/images/interface.svg b/addons/default/visiosoft/profile-module/resources/images/interface.svg
new file mode 100644
index 000000000..6b1df5999
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/images/interface.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<g>
+		<path d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,74.667    c67.635,0,122.667,55.031,122.667,122.667S323.635,320,256,320s-122.667-55.031-122.667-122.667S188.365,74.667,256,74.667z     M256,469.333c-69.707,0-131.52-33.755-170.473-85.615c42.676-20.534,103.621-42.385,170.473-42.385    c66.857,0,127.807,21.854,170.474,42.383C387.521,435.577,325.708,469.333,256,469.333z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/>
+	</g>
+</g></g> </svg>
diff --git a/addons/default/visiosoft/profile-module/resources/images/location.svg b/addons/default/visiosoft/profile-module/resources/images/location.svg
new file mode 100644
index 000000000..74fcde598
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/images/location.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="512px" height="512px"><g><g id="Address"><path d="M13,10H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V11A1,1,0,0,0,13,10Zm-1,4H10V12h2Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M17,16h4a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H17a1,1,0,0,0-1,1v4A1,1,0,0,0,17,16Zm1-4h2v2H18Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M25,16h4a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H25a1,1,0,0,0-1,1v4A1,1,0,0,0,25,16Zm1-4h2v2H26Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M33,16h4a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H33a1,1,0,0,0-1,1v4A1,1,0,0,0,33,16Zm1-4h2v2H34Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M41,16h4a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H41a1,1,0,0,0-1,1v4A1,1,0,0,0,41,16Zm1-4h2v2H42Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M13,18H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V19A1,1,0,0,0,13,18Zm-1,4H10V20h2Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M13,26H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V27A1,1,0,0,0,13,26Zm-1,4H10V28h2Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M13,34H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V35A1,1,0,0,0,13,34Zm-1,4H10V36h2Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M13,42H9a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1V43A1,1,0,0,0,13,42Zm-1,4H10V44h2Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M17,24h4a1,1,0,0,0,1-1V19a1,1,0,0,0-1-1H17a1,1,0,0,0-1,1v4A1,1,0,0,0,17,24Zm1-4h2v2H18Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M25,24h4a1,1,0,0,0,1-1V19a1,1,0,0,0-1-1H25a1,1,0,0,0-1,1v4A1,1,0,0,0,25,24Zm1-4h2v2H26Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M33,24h4a1,1,0,0,0,1-1V19a1,1,0,0,0-1-1H33a1,1,0,0,0-1,1v4A1,1,0,0,0,33,24Zm1-4h2v2H34Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M41,24h4a1,1,0,0,0,1-1V19a1,1,0,0,0-1-1H41a1,1,0,0,0-1,1v4A1,1,0,0,0,41,24Zm1-4h2v2H42Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M50,28.051V8h1a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1H3A1,1,0,0,0,2,3V7A1,1,0,0,0,3,8H4V53a1,1,0,0,0,1,1H41.751a72.309,72.309,0,0,0,6.542,7.707,1,1,0,0,0,1.414,0C50.209,61.205,62,49.318,62,41A13.008,13.008,0,0,0,50,28.051ZM4,4H50V6H4ZM6,8H48V28.051A13.008,13.008,0,0,0,36,41a11.625,11.625,0,0,0,.441,3H36V27a1,1,0,0,0-1-1H19a1,1,0,0,0-1,1V44H17a1,1,0,0,0-1,1v3a1,1,0,0,0-1,1v3H6ZM34,44H32V31a1,1,0,0,0-1-1H23a1,1,0,0,0-1,1V44H20V28H34Zm-4,0H24V32h6Zm7.109,2c.265.665.572,1.333.906,2H18V46ZM17,52V50H39.1c.4.677.817,1.346,1.251,2Zm32,7.558C46.466,56.869,38,47.4,38,41a11,11,0,0,1,22,0C60,47.4,51.534,56.869,49,59.558Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="M49,32a9,9,0,1,0,9,9A9.011,9.011,0,0,0,49,32Zm0,16a7,7,0,1,1,7-7A7.008,7.008,0,0,1,49,48Z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/></g></g> </svg>
diff --git a/addons/default/visiosoft/profile-module/resources/images/social-media.svg b/addons/default/visiosoft/profile-module/resources/images/social-media.svg
new file mode 100644
index 000000000..e948e1bfc
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/images/social-media.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512 512" width="512px"><g><path d="m512 256c0-141.488281-114.496094-256-256-256-141.488281 0-256 114.496094-256 256 0 140.234375 113.539062 256 256 256 141.875 0 256-115.121094 256-256zm-256-226c124.617188 0 226 101.382812 226 226 0 45.585938-13.558594 89.402344-38.703125 126.515625-100.96875-108.609375-273.441406-108.804687-374.59375 0-25.144531-37.113281-38.703125-80.929687-38.703125-126.515625 0-124.617188 101.382812-226 226-226zm-168.585938 376.5c89.773438-100.695312 247.421876-100.671875 337.167969 0-90.074219 100.773438-247.054687 100.804688-337.167969 0zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m256 271c49.625 0 90-40.375 90-90v-30c0-49.625-40.375-90-90-90s-90 40.375-90 90v30c0 49.625 40.375 90 90 90zm-60-120c0-33.085938 26.914062-60 60-60s60 26.914062 60 60v30c0 33.085938-26.914062 60-60 60s-60-26.914062-60-60zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/></g> </svg>
diff --git a/addons/default/visiosoft/profile-module/resources/images/website.svg b/addons/default/visiosoft/profile-module/resources/images/website.svg
new file mode 100644
index 000000000..babe27185
--- /dev/null
+++ b/addons/default/visiosoft/profile-module/resources/images/website.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512 512" width="512px"><g><g id="Outline"><path d="m56 208a24.027 24.027 0 0 1 24-24h88v-16h-88a40.045 40.045 0 0 0 -40 40v48h16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m244 88a28 28 0 1 0 28 28 28.032 28.032 0 0 0 -28-28zm0 40a12 12 0 1 1 12-12 12.013 12.013 0 0 1 -12 12z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m488 16h-169.353a48.246 48.246 0 0 0 -41.16 23.305l-10.017 16.695h-59.47a24.028 24.028 0 0 0 -24 24v144a24.027 24.027 0 0 0 24 24h48v32a8 8 0 0 0 13.121 6.146l45.779-38.146h109.1a24.027 24.027 0 0 0 24-24v-113.554a85.486 85.486 0 0 0 44.533-23.665l1.124-1.124a8 8 0 0 0 2.343-5.657v-56a8 8 0 0 0 -8-8zm-56 208a8.009 8.009 0 0 1 -8 8h-112a8 8 0 0 0 -5.121 1.854l-34.879 29.065v-22.919a8 8 0 0 0 -8-8h-56a8.009 8.009 0 0 1 -8-8v-11.471l71.774-43.064 67.788 45.191a8 8 0 0 0 8.016.5l43.847-21.924 40.575 27.049zm0-22.948-35.562-23.708a8 8 0 0 0 -8.016-.5l-43.847 21.924-68.137-45.425a8 8 0 0 0 -8.554-.2l-67.884 40.727v-113.87a8.009 8.009 0 0 1 8-8h124.687l-26.2 26.2a27.8 27.8 0 0 0 39.313 39.315l39.227-39.228a85.82 85.82 0 0 0 46.621 13.713c.118 0 .234-.008.352-.009zm48-124.394a70.106 70.106 0 0 1 -87.239 7.568l-4.323-2.882a8 8 0 0 0 -10.095 1l-43.857 43.856a11.858 11.858 0 0 1 -15.424 1.1 11.8 11.8 0 0 1 -1.262-17.782l39.857-39.858 16-16-11.314-11.317-13.657 13.657h-62.556l5.077-8.463a32.164 32.164 0 0 1 27.44-15.537h161.353z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m472 272h-144a24.028 24.028 0 0 0 -24 24v44.686l-29.657 29.657a8 8 0 0 0 5.657 13.657h24v8a24.028 24.028 0 0 0 24 24h144a24.028 24.028 0 0 0 24-24v-96a24.028 24.028 0 0 0 -24-24zm8 120a8.009 8.009 0 0 1 -8 8h-144a8.009 8.009 0 0 1 -8-8v-16a8 8 0 0 0 -8-8h-12.687l18.344-18.343a8 8 0 0 0 2.343-5.657v-48a8.009 8.009 0 0 1 8-8h144a8.009 8.009 0 0 1 8 8z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m336 304h80v16h-80z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m432 304h32v16h-32z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m336 368h128v16h-128z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m336 336h128v16h-128z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m72 200h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m104 200h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m136 200h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m72 232h96v16h-96z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m40 416h144a24.028 24.028 0 0 0 24-24v-32h24a8 8 0 0 0 5.657-13.657l-29.657-29.657v-20.686a24.028 24.028 0 0 0 -24-24h-144a24.028 24.028 0 0 0 -24 24v96a24.028 24.028 0 0 0 24 24zm-8-120a8.009 8.009 0 0 1 8-8h144a8.009 8.009 0 0 1 8 8v24a8 8 0 0 0 2.343 5.657l18.344 18.343h-12.687a8 8 0 0 0 -8 8v40a8.009 8.009 0 0 1 -8 8h-144a8.009 8.009 0 0 1 -8-8z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m48 304h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m48 336h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m48 368h16v16h-16z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m80 304h96v16h-96z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m80 336h96v16h-96z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m80 368h96v16h-96z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/><path d="m424 432h-140.687a35.08 35.08 0 0 0 -24.97 10.343 19.185 19.185 0 0 1 -13.656 5.657h-41.374a19.185 19.185 0 0 1 -13.656-5.657 35.08 35.08 0 0 0 -24.97-10.343h-140.687a8 8 0 0 0 -8 8v24a32.036 32.036 0 0 0 32 32h352a32.036 32.036 0 0 0 32-32v-24a8 8 0 0 0 -8-8zm-8 32a16.019 16.019 0 0 1 -16 16h-352a16.019 16.019 0 0 1 -16-16v-16h132.687a19.185 19.185 0 0 1 13.656 5.657 35.08 35.08 0 0 0 24.97 10.343h41.374a35.08 35.08 0 0 0 24.97-10.343 19.185 19.185 0 0 1 13.656-5.657h132.687z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#707070"/></g></g> </svg>
diff --git a/addons/default/visiosoft/profile-module/resources/views/address/create.twig b/addons/default/visiosoft/profile-module/resources/views/address/create.twig
index 8713e5d86..587478940 100644
--- a/addons/default/visiosoft/profile-module/resources/views/address/create.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/address/create.twig
@@ -1,8 +1,15 @@
 {% extends "theme::layouts/default" %}
+
+{% block styles %}
+    {{ asset_style("visiosoft.module.profile::assets/css/profile.scss") }}
+{% endblock %}
+
 {% block content %}
     <div class="row">
+
         {% include "visiosoft.module.profile::profile/partials/navigation" %}
-        <div class="col-md-12">
+
+        <div class="col-12 col-md-8">
             <div class="row px-3">
                 <div class="col-md-12 bg-dark text-white p-5">
                     <h3>{{ trans('visiosoft.module.profile::field.create_address.name') }}</h3>
diff --git a/addons/default/visiosoft/profile-module/resources/views/address/edit.twig b/addons/default/visiosoft/profile-module/resources/views/address/edit.twig
index c14ce8890..f0bd273a9 100644
--- a/addons/default/visiosoft/profile-module/resources/views/address/edit.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/address/edit.twig
@@ -1,9 +1,15 @@
 {% extends "theme::layouts/default" %}
-{% block content %}
 
+{% block styles %}
+    {{ asset_style("visiosoft.module.profile::assets/css/profile.scss") }}
+{% endblock %}
+
+{% block content %}
     <div class="row">
+
         {% include "visiosoft.module.profile::profile/partials/navigation" %}
-        <div class="col-md-12">
+
+        <div class="col-12 col-md-8">
             <div class="row px-3">
                 <div class="col-md-12 bg-dark text-white p-5">
                     <h3>{{ trans('visiosoft.module.profile::field.edit_address.name') }}</h3>
diff --git a/addons/default/visiosoft/profile-module/resources/views/address/list.twig b/addons/default/visiosoft/profile-module/resources/views/address/list.twig
index 0cb2954fc..2e5b212b6 100644
--- a/addons/default/visiosoft/profile-module/resources/views/address/list.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/address/list.twig
@@ -1,8 +1,15 @@
 {% extends "theme::layouts/default" %}
+
+{% block styles %}
+    {{ asset_style("visiosoft.module.profile::assets/css/profile.scss") }}
+{% endblock %}
+
 {% block content %}
     <div class="row">
+
         {% include "visiosoft.module.profile::profile/partials/navigation" %}
-        <div class="col-md-12">
+
+        <div class="col-12 col-md-8">
             <table class="table">
                 <thead class="thead-dark">
                 <tr>
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/ads.twig b/addons/default/visiosoft/profile-module/resources/views/profile/ads.twig
index dc8c7b70f..94a39f68b 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/ads.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/ads.twig
@@ -1,8 +1,15 @@
 {% extends "theme::layouts/default" %}
+
+{% block styles %}
+    {{ asset_style("visiosoft.module.profile::assets/css/profile.scss") }}
+{% endblock %}
+
 {% block content %}
     <div class="row">
+
         {% include "visiosoft.module.profile::profile/partials/navigation" %}
-        <div class="col-md-12">
+
+        <div class="col-12 col-md-8">
             <div class="row px-3">
                 <div class="col-md-12 bg-dark text-white p-5">
                     <h3>{{ trans('visiosoft.module.advs::field.my_ads.name') }}</h3>
diff --git a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
index d2b384a0d..74fef0959 100644
--- a/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
+++ b/addons/default/visiosoft/profile-module/resources/views/profile/detail.twig
@@ -1,4 +1,9 @@
 {% extends "theme::layouts/default" %}
+
+{% block styles %}
+    {{ asset_style("visiosoft.module.profile::assets/css/profile.scss") }}
+{% endblock %}
+
 {% block content %}
 
     {% set profile_photo = user.file %}
@@ -8,9 +13,11 @@
         {% set profile_photo = img('visiosoft.module.profile::images/profile-default.png').url %}
     {% endif %}
 
-    <div class="row">
+    <div class="row mt-5">
+
         {% include "visiosoft.module.profile::profile/partials/navigation" %}
-        <div class="col-md-12">
+
+        <div class="col-12 col-md-8">
             <div class="row px-3">
 
                 <!-- User Profile Detail Section-->
@@ -175,13 +182,10 @@
                         {{ addBlock('profile/detail/content')|raw }}
                     </div>
                     <!-- User Profile Form Section-->
-
                 </div>
             </div>
-
-
         </div>
+
     </div>
     {{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile.js") }}
-    {{ asset_add("styles.css", "visiosoft.module.profile::assets/css/profile.css") }}
 {% endblock %}
\ No newline at end of file
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 5477bfc5f..51f1bee68 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
@@ -1,14 +1,33 @@
-<div class="col-md-12">
-    <nav class="profile-navigation">
-        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
-            <a class="nav-item nav-link active"
-               href="{{ url_route('profile::profile') }}">{{ trans('visiosoft.module.profile::addon.title') }}</a>
-            <a class="nav-item nav-link active"
-               href="{{ url_route('profile::ads') }}">{{ trans('visiosoft.module.advs::addon.title') }}</a>
-            <a class="nav-item nav-link active"
-               href="{{ url_route('profile::address') }}">{{ trans('visiosoft.module.profile::stream.adress.name') }}</a>
+<div class="col-12 mb-3 navbar-light py-2 d-md-none">
+    <button class="profile-nav-toggler" id="navbarSideButton" type="button">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+<div class="col-10 col-sm-6 col-md-4 profile-navigation border rounded navbar-side bg-white" id="navbarSide">
+    <a href="{{ url_route('profile::profile') }}" class="px-3 mb-2 link-unstyled">
+        <img src="{{ img('visiosoft.module.profile::images/interface.svg').url }}">
+        <p>Vedat Akd</p>
+    </a>
+    <hr class="mt-2">
+    <a href="{{ url_route('profile::profile') }}"
+       class="px-3 link-unstyled{{ app.request.pathinfo == '/profile' ? ' active' : '' }}">
+        <img src="{{ img('visiosoft.module.profile::images/social-media.svg').url }}">
+        <p>{{ trans('visiosoft.module.profile::addon.title') }}</p>
+    </a>
+    <a href="{{ url_route('profile::ads') }}"
+       class="px-3 link-unstyled{{ app.request.pathinfo == '/profile/ads' ? ' active' : '' }}">
+        <img src="{{ img('visiosoft.module.profile::images/website.svg').url }}">
+        <p>{{ trans('visiosoft.module.advs::addon.title') }}</p>
+    </a>
+    <a href="{{ url_route('profile::address') }}"
+       class="px-3 link-unstyled{{ app.request.pathinfo == '/profile/address' ? ' active' : '' }}">
+        <img src="{{ img('visiosoft.module.profile::images/location.svg').url }}">
+        <p>{{ trans('visiosoft.module.profile::stream.adress.name') }}</p>
+    </a>
 
-            {{ addBlock('profile/navigation')|raw }}
-        </div>
-    </nav>
-</div>
\ No newline at end of file
+    {{ addBlock('profile/navigation')|raw }}
+</div>
+
+<div class="overlay"></div>
+
+{{ asset_add("scripts.js", "visiosoft.module.profile::assets/js/profile-nav.js") }}
\ No newline at end of file