diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx
index a420d32..ccb8b2c 100644
--- a/compass/app/auth/login/page.tsx
+++ b/compass/app/auth/login/page.tsx
@@ -51,7 +51,7 @@ export default function Page() {
                         height={91}
                     />
 
-                    <h1 className='font-bold text-xl text-purple-800'>Login</h1>
+                    <h1 className='font-bold text-2xl text-purple-800'>Login</h1>
 
                     <div className="mb-6">
                         <Input type='email' valid={emailError == ""} title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} required />
diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/resource/Sidebar.tsx
index f139b7d..97e59d4 100644
--- a/compass/components/resource/Sidebar.tsx
+++ b/compass/components/resource/Sidebar.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { HomeIcon, ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
 import { SidebarItem } from './SidebarItem';
+import { UserProfile } from './UserProfile';
 
 interface SidebarProps {
   setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -24,13 +25,7 @@ const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
       {/* user + logout button  */}
         <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
 
-          <div className="flex flex-col items-start space-y-2">
-            <div className="flex flex-col">
-              <span className="text-sm font-semibold text-gray-800">Compass Center</span>
-              <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
-            </div>
-            <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
-          </div>
+          <UserProfile />
         </div>
         {/* navigation menu  */}
         <div className="flex flex-col space-y-2">
diff --git a/compass/components/resource/UserProfile.tsx b/compass/components/resource/UserProfile.tsx
new file mode 100644
index 0000000..0471596
--- /dev/null
+++ b/compass/components/resource/UserProfile.tsx
@@ -0,0 +1,11 @@
+export const UserProfile = () => {
+    return (
+        <div className="flex flex-col items-start space-y-2">
+        <div className="flex flex-col">
+          <span className="text-sm font-semibold text-gray-800">Compass Center</span>
+          <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
+        </div>
+        <button className="text-red-600 font-semibold text-xs hover:underline mt-1">Sign out</button>
+      </div>
+    )
+}
\ No newline at end of file