diff --git a/frontend/src/components/AvatarImage/AvatarImage.scss b/frontend/src/components/AvatarImage/AvatarImage.scss
new file mode 100644
index 00000000..e48ff6d4
--- /dev/null
+++ b/frontend/src/components/AvatarImage/AvatarImage.scss
@@ -0,0 +1,13 @@
+.profile-image {
+  border-radius: 50%;
+}
+
+.small {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.large {
+  width: 4rem;
+  height: 4rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/AvatarImage/index.tsx b/frontend/src/components/AvatarImage/index.tsx
new file mode 100644
index 00000000..a1e79c19
--- /dev/null
+++ b/frontend/src/components/AvatarImage/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import emptyUser from '../../assets/img/emptyUser.jpg';
+import './AvatarImage.scss';
+
+type Size = 'small' | 'large';
+
+interface AvatarImageProps {
+  userName: string;
+  source?: string;
+  size: Size;
+}
+
+const AvatarImage = ({ userName, source, size }: AvatarImageProps) => (
+  <img src={source || emptyUser} alt={`${userName}`} className={`profile-image ${size}`} />
+);
+
+export default AvatarImage;
diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
index 9df1cd73..f2da0ec3 100644
--- a/frontend/src/components/BCHeaderwSide/index.tsx
+++ b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -21,6 +21,7 @@ import './BCHeaderwSide.scss';
 import RightPanelTitle from '../RightPanelTitle';
 import { env } from '../../env';
 import ThemeToggle from '../ThemeToggle';
+import MyProfile from '../MyProfile';
 
 interface ListItem {
   name: string;
@@ -43,60 +44,6 @@ const listItems = [
         link: '/dashboard',
         disabled: false
       },
-      {
-        name: 'Seedlots',
-        icon: 'SoilMoistureField',
-        link: '/seedlot',
-        disabled: true
-      },
-      {
-        name: 'Seedlings',
-        icon: 'CropGrowth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Nurseries',
-        icon: 'CropHealth',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Orchards',
-        icon: 'MapBoundaryVegetation',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Reports',
-        icon: 'Report',
-        link: '/reports',
-        disabled: true
-      },
-      {
-        name: 'Tests',
-        icon: 'Chemistry',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Parent tree',
-        icon: 'Tree',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Tree seed center',
-        icon: 'Enterprise',
-        link: '#',
-        disabled: true
-      },
-      {
-        name: 'Financial',
-        icon: 'Money',
-        link: '#',
-        disabled: true
-      }
     ]
   },
   {
@@ -211,7 +158,7 @@ const BCHeaderwSide = () => {
               title="My Profile"
               closeFn={closeMyProfilePanel}
             />
-            <Button kind='secondary' onClick={()=>console.log('Hi Jazz')} >Log Out</Button>
+            <MyProfile/>
           </HeaderPanel>
           <SideNav isChildOfHeader expanded={isSideNavExpanded} aria-label="Side menu" className="bcheaderwside-sidenav">
             <SideNavItems>
diff --git a/frontend/src/components/MyProfile/MyProfile.scss b/frontend/src/components/MyProfile/MyProfile.scss
new file mode 100644
index 00000000..cc131573
--- /dev/null
+++ b/frontend/src/components/MyProfile/MyProfile.scss
@@ -0,0 +1,29 @@
+@use '@bcgov-nr/nr-fsa-theme/design-tokens/variables.scss' as vars;
+
+.user-info-section {
+  padding: 1rem;
+  display: flex;
+}
+
+.user-data {
+  margin-left: 2rem;
+}
+
+.user-name {
+  font-weight: bold;
+}
+
+.divisory {
+  background-color: var(--#{vars.$bcgov-prefix}-border-subtle-01);
+  border: 0;
+  height: 1px;
+}
+
+.account-nav a {
+  width: 100%;
+  font-weight: bold;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/frontend/src/components/MyProfile/index.tsx b/frontend/src/components/MyProfile/index.tsx
new file mode 100644
index 00000000..ab46f1ba
--- /dev/null
+++ b/frontend/src/components/MyProfile/index.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import {
+  SideNavLink
+} from '@carbon/react';
+import * as Icons from '@carbon/icons-react';
+
+
+import AvatarImage from '../AvatarImage';
+
+import { useThemePreference } from '../../utils/ThemePreference';
+
+import './MyProfile.scss';
+import { logout } from '../../services/AuthService';
+
+const MyProfile = () => {
+  const { theme, setTheme } = useThemePreference();
+  const userData = {firstName:'Jazz', lastName:"Grewal", idirUsername:"Jasgrewal", email:"jazz@test.com"};
+
+  const [goToURL, setGoToURL] = useState<string>('');
+  const [goTo, setGoTo] = useState<boolean>(false);
+
+  const navigate = useNavigate();
+
+  const changeTheme = () => {
+    if (theme === 'g10') {
+      setTheme('g100');
+      localStorage.setItem('mode', 'dark');
+    }
+    if (theme === 'g100') {
+      setTheme('g10');
+      localStorage.setItem('mode', 'light');
+    }
+  };
+
+  useEffect(() => {
+    if (goTo) {
+      setGoTo(false);
+      navigate(goToURL);
+    }
+  }, [goTo]);
+
+  return (
+    <>
+      <div className="user-info-section">
+        <div className="user-image">
+          <AvatarImage userName={`${userData.firstName} ${userData.lastName}`} size="large" />
+        </div>
+        <div className="user-data">
+          <p className="user-name">{`${userData.firstName} ${userData.lastName}`}</p>
+          <p>{`IDIR: ${userData.idirUsername}`}</p>
+          <p>{userData.email}</p>
+        </div>
+      </div>
+      <hr className="divisory" />
+      <nav className="account-nav">
+        <ul>
+          <SideNavLink
+            className="cursor-pointer"
+            renderIcon={theme === 'g10'?Icons.Asleep:Icons.Light}
+            onClick={() => { changeTheme(); }}
+          >
+            Change theme
+          </SideNavLink>
+          <SideNavLink
+            className="cursor-pointer"
+            renderIcon={Icons.UserFollow}
+            onClick={()=>{logout()}}
+          >
+            Log out
+          </SideNavLink>
+        </ul>
+      </nav>
+    </>
+  );
+};
+
+export default MyProfile;
diff --git a/frontend/src/screens/Dashboard/index.tsx b/frontend/src/screens/Dashboard/index.tsx
index 2c6798dd..f6b00b30 100644
--- a/frontend/src/screens/Dashboard/index.tsx
+++ b/frontend/src/screens/Dashboard/index.tsx
@@ -1,9 +1,5 @@
 import React from "react";
-import { logout } from "../../services/AuthService";
-import { Button } from "@carbon/react";
-import { Asleep, Light } from '@carbon/icons-react';
 import { useThemePreference } from "../../utils/ThemePreference";
-import { toggleTheme } from "../../utils/ThemeFunction";
 
 
 const Dashboard: React.FC = () => {
@@ -14,35 +10,10 @@ const Dashboard: React.FC = () => {
       <>
         <div className="container">
           <div className="row">
-            <div className="col-md-6 border border-primary">
-              <div className="display-2">Hi There </div>
-            </div>
             <div className="col-md-6">
-              <div className="display-4">Welcome to the Dashboard Page</div>
-            </div>
-          </div>
-
-          <div className="row my-3">
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-primary ">
-              Column 1
-            </div>
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-secondary text-white">
-              Column 2
-            </div>
-            <div className="col-6 col-lg-4 border border-primary p-5 bg-success text-white">
-              Column 3
+              <div className="display-6">Hi There, <br/>Welcome to Main Screen</div>
             </div>
           </div>
-          <div className="row">
-            <div className="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui cupiditate nulla dolor debitis harum dignissimos velit, molestias cumque magni laborum explicabo eaque minima. Quos incidunt cupiditate id eveniet sed. Assumenda quia eveniet animi maiores harum.</div>
-          </div>
-
-          <div className="mt-5">
-            <Button kind='secondary' renderIcon={theme === 'g10'?Asleep:Light}  onClick={()=>toggleTheme(theme,setTheme)} >Toggle Theme</Button>
-          </div>
-          <div className="mt-5">
-            <Button kind='secondary'  onClick={()=>logout()} >Logout</Button>
-          </div>
         </div>
       </>
     );