diff --git a/src/images/GenerateOnboardingSvg/GenerateSvg.js b/src/images/GenerateOnboardingSvg/GenerateSvg.js
index 510e11c..1f07e4f 100644
--- a/src/images/GenerateOnboardingSvg/GenerateSvg.js
+++ b/src/images/GenerateOnboardingSvg/GenerateSvg.js
@@ -41,12 +41,12 @@ function createBlob(options) {
 
 
 export var generateSvgAvatar = (function () {
-
     return function (seed, raw) {
-
-        let pubKey = Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
+        let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
         //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88"
-
+        if (!localStorage.getItem('svgKey')) {
+            localStorage.setItem('svgKey', `${pubKey}`)
+        }
         let particles = [];
         let gradients = ['#000000'];
         let defs = [];
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 0221469..0ea841d 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Sidebar from '../partials/Sidebar';
 import Header from '../partials/Header';
@@ -19,7 +19,9 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10';
 import DashboardCard11 from '../partials/dashboard/DashboardCard11';
 
 function Dashboard() {
-
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
@@ -58,7 +60,7 @@ function Dashboard() {
                     <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                   </svg>
                   <span className="hidden xs:block ml-2">Add View</span>
-                </button>                
+                </button>
               </div>
 
             </div>
@@ -88,7 +90,7 @@ function Dashboard() {
               <DashboardCard10 />
               {/* Card (Income/Expenses) */}
               <DashboardCard11 />
-              
+
             </div>
 
           </div>
@@ -100,4 +102,4 @@ function Dashboard() {
   );
 }
 
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;
diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx
index bc6f333..76a9e1e 100644
--- a/src/pages/Onboarding1.jsx
+++ b/src/pages/Onboarding1.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
+import Logo from "../images/logo.png";
 
 function Onboarding1() {
   return (
@@ -21,22 +22,7 @@ function Onboarding1() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
                   Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
diff --git a/src/pages/Onboarding2.jsx b/src/pages/Onboarding2.jsx
index bc793be..2dd3e1a 100644
--- a/src/pages/Onboarding2.jsx
+++ b/src/pages/Onboarding2.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
+import Logo from "../images/logo.png";
 
 function Onboarding2() {
   return (
@@ -21,22 +22,7 @@ function Onboarding2() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
                   Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx
index ee664c9..77824d7 100644
--- a/src/pages/Onboarding3.jsx
+++ b/src/pages/Onboarding3.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import Logo from "../images/logo.png";
 
 
 function Onboarding3() {
@@ -21,22 +22,7 @@ function Onboarding3() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
                   Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -75,7 +61,7 @@ function Onboarding3() {
                   {/* htmlForm */}
                   <div className="grid grid-cols-4 gap-2.5 mb-14">
                     {arrayBadges.map(tag => (
-                      <button className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                      <button key={tag} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                         <span className="text-sm font-medium">{tag}</span>
                       </button>
                     ))}
diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx
index c524f0c..8fc3b0a 100644
--- a/src/pages/Onboarding4.jsx
+++ b/src/pages/Onboarding4.jsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import Logo from "../images/logo.png";
 
 
 
@@ -21,22 +22,7 @@ function Onboarding4() {
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
                 <div className="text-sm">
                   Have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/signin">Sign In</Link>
@@ -76,7 +62,7 @@ function Onboarding4() {
                     <path className="text-emerald-500" d="m28.5 41-8-8 3-3 5 5 12-12 3 3z" />
                   </svg>
                   <h1 className="text-3xl text-slate-800 font-bold mb-8">Nice to meet you, Ivan 🙌</h1>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/settings">Go To Profile -&gt;</Link>
+                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white" to="/settings/account">Go To Profile -&gt;</Link>
                 </div>
 
                 <div className="flex items-center justify-between mt-6">
diff --git a/src/pages/Signin.jsx b/src/pages/Signin.jsx
index 8810b4e..9bcd3a0 100644
--- a/src/pages/Signin.jsx
+++ b/src/pages/Signin.jsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import AuthImage from '../images/auth-image.jpg';
 import AuthDecoration from '../images/auth-decoration.png';
 
 function Signin() {
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   return (
     <main className="bg-white">
 
@@ -94,4 +97,4 @@ function Signin() {
   );
 }
 
-export default Signin;
\ No newline at end of file
+export default Signin;
diff --git a/src/pages/settings/Account.jsx b/src/pages/settings/Account.jsx
index ae869b3..246334f 100644
--- a/src/pages/settings/Account.jsx
+++ b/src/pages/settings/Account.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
@@ -6,7 +6,9 @@ import SettingsSidebar from '../../partials/settings/SettingsSidebar';
 import AccountPanel from '../../partials/settings/AccountPanel';
 
 function Account() {
-
+  useEffect(() => {
+    localStorage.setItem('svgKey', '')
+  }, [])
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
@@ -15,7 +17,7 @@ function Account() {
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
-      {/* Content area */} 
+      {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
 
         {/*  Site header */}
@@ -30,7 +32,7 @@ function Account() {
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Account Settings ✨</h1>
             </div>
 
-            {/* Content */} 
+            {/* Content */}
             <div className="bg-white shadow-lg rounded-sm mb-8">
               <div className="flex flex-col md:flex-row md:-mr-px">
                 <SettingsSidebar />
@@ -42,9 +44,9 @@ function Account() {
         </main>
 
       </div>
-      
+
     </div>
   );
 }
 
-export default Account;
\ No newline at end of file
+export default Account;
diff --git a/src/partials/Sidebar.jsx b/src/partials/Sidebar.jsx
index 6070baf..175e7e4 100644
--- a/src/partials/Sidebar.jsx
+++ b/src/partials/Sidebar.jsx
@@ -14,7 +14,6 @@ function Sidebar({
 
   const trigger = useRef(null);
   const sidebar = useRef(null);
-
   const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
   const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true');