diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index 978c393..ddddc8a 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -190,13 +190,13 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
               </div>
 
               {/* Action Buttons */}
-              <div className="flex gap-4 lg:flex-col w-full lg:w-auto">
+              <div className="flex flex-col items-center lg:items-start gap-2 w-full lg:w-auto">
                 {isCurrentUser && (
-                  <div className="transform hover:scale-110 transition-all duration-300 w-full lg:w-auto">
+                  <div className="transform hover:scale-110 transition-all duration-300 w:full">
                     <EditProfileButton memberId={member.id} />
                   </div>
                 )}
-                <div className="transform hover:scale-110 transition-all duration-300 w-full lg:w-auto">
+                <div className="transform hover:scale-110 transition-all duration-300 w-full">
                   <ExportProfileButton
                     memberId={member.id}
                     memberName={member.name}
diff --git a/components/profile/edit-profile-button.tsx b/components/profile/edit-profile-button.tsx
index 60386d1..b3e365d 100644
--- a/components/profile/edit-profile-button.tsx
+++ b/components/profile/edit-profile-button.tsx
@@ -14,10 +14,10 @@ export function EditProfileButton({ memberId }: EditProfileButtonProps) {
   return (
     <Button
       variant="outline"
-      className="gap-2"
+      className="gap-2 w-auto"
       onClick={() => router.push(`/upload/confirm?edit=true&memberId=${memberId}`)}
     >
-      <Pencil className="h-4 w-4" />
+      <Pencil className="h-4 w-4"/>
       Edit Profile
     </Button>
   );
diff --git a/components/profile/experience-section.tsx b/components/profile/experience-section.tsx
index 1a5a5e1..b6b9d5c 100644
--- a/components/profile/experience-section.tsx
+++ b/components/profile/experience-section.tsx
@@ -8,6 +8,7 @@ interface Experience {
   id: string;
   title: string;
   company: string;
+  role: string;
   start_date: string;
   end_date: string | null;
   description: string;
@@ -40,7 +41,10 @@ export function ExperienceSection({ experiences, isEditable }: ExperienceSection
           <div key={experience.id} className="border-b border-gray-800 pb-4 last:border-0 last:pb-0">
             <h3 className="text-base font-semibold text-white">{experience.title}</h3>
             <p className="text-green-400 text-sm mt-1">{experience.company}</p>
-            <p className="text-gray-400 text-xs mt-1">{dateRange}</p>
+            <p className="text-xs text-gray-400 mt-1 flex justify-between">
+              <span>{experience.role}</span>
+              <span>{dateRange}</span>
+            </p>
             {experience.description && (
               <ul className="list-disc list-inside text-gray-300 text-sm mt-2 space-y-1">
                 {experience.description
diff --git a/components/profile/export-profile-button.tsx b/components/profile/export-profile-button.tsx
index 4bb3241..95b4f3d 100644
--- a/components/profile/export-profile-button.tsx
+++ b/components/profile/export-profile-button.tsx
@@ -197,9 +197,9 @@ try {
   };
   
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col items-center gap-2 w-full sm:w-auto">
       <Dialog open={emailDialogOpen} onOpenChange={setEmailDialogOpen}>
-        <Button onClick={handleSendEmail} className="bg-green-500 mr-4 hover:bg-green-600 gap-2">
+        <Button onClick={handleSendEmail} className="bg-green-500 hover:bg-green-600 gap-2">
               <Mail className="h-4 w-4 mr-2" />
               Send Email
             </Button>