diff --git a/package.json b/package.json
index 41a0025f..75c08720 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "pnpm": "^8.10.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.0"
   },
diff --git a/public/default.png b/public/default.png
new file mode 100644
index 00000000..bb934c24
Binary files /dev/null and b/public/default.png differ
diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
index c5cf1cce..2090b9fc 100644
--- a/src/components/Profile/Profile.jsx
+++ b/src/components/Profile/Profile.jsx
@@ -6,6 +6,7 @@ import { faXTwitter } from '@fortawesome/free-brands-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
 
+
 function Profile({ data }) {
   return (
     <div className="profile-container">
@@ -15,7 +16,8 @@ function Profile({ data }) {
 
   function Card({ data }) {
     const cardRef = React.useRef();
-    const handleWheel = (event) => {
+    const [avatarSrc, setAvatarSrc] = React.useState(data.avatar);
+    const handleWheel = (event) => { 
       event.stopPropagation();
       event.preventDefault();
       let container = event.target;
@@ -33,11 +35,16 @@ function Profile({ data }) {
       cardRef.current.addEventListener('wheel', handleWheel, { passive: false });
     }, []);
 
+
     return (
       <div className="profile-card">
         <div className="top-container">
           <div className="profile-photo">
-            <img src={data.avatar} alt="User logo" />
+            <img
+            src={avatarSrc}
+            alt="User logo"
+            onError={() => setAvatarSrc('default.png')}
+          /> 
           </div>
           <div className="profile-details">
             <h3>
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 0a1c6f28..72649518 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -3,6 +3,7 @@ import './Sidebar.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import useTheme from '../../hooks/useTheme';
+// import {UserForm} from '../UserFrom/UserFrom';
 
 function Sidebar() {
   const { theme, toogleTheme } = useTheme();
@@ -29,7 +30,7 @@ function Sidebar() {
         </div>
       </div>
       <div className="headline">Discover and Connect with Skilled Developers.</div>
-      <div className="description">
+      <div className="description"> 
         <a href=" https://github.com/shyamtawli/devFind#how-to-add-your-profile-" target="_blank" rel="noreferrer">
           <button className="link_button"> Add your profile </button>
         </a>