diff --git a/src/components/ProfileAvatar.tsx b/src/components/ProfileAvatar.tsx
new file mode 100644
index 0000000..ce3d776
--- /dev/null
+++ b/src/components/ProfileAvatar.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const ProfileAvatar: React.FC = () => {
+    // UI for avatar and profile
+    return (
+        <div className={classNames('daisy-avatar')}>  
+            <img src='avatar.png' alt='Profile avatar' className={classNames('avatar-image')}/>
+            <p className={classNames('username')}>Username</p>
+        </div>
+    );
+};
+
+export default ProfileAvatar;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b426627..23fd8fb 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,8 @@ import ThemeProvider from "@components/ui/Theme/ThemeProvider";
 import "../styles/globals.css";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { v4 as uuid } from "uuid";
-import { atom } from "jotai";
+import { atom } from 'jotai';
+import ProfileAvatar from '../components/ProfileAvatar';
 
 // Create a client
 const queryClient = new QueryClient();
@@ -17,6 +18,7 @@ const MyApp: AppType = ({ Component, pageProps: { ...pageProps } }) => {
     // Provide the client to your App
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
+        <ProfileAvatar />
         <Component {...pageProps} />
       </QueryClientProvider>
     </ThemeProvider>