diff --git a/src/components/Dropdown/components/DropdownTitle.tsx b/src/components/Dropdown/components/DropdownTitle.tsx
index bc928f4..75d3746 100644
--- a/src/components/Dropdown/components/DropdownTitle.tsx
+++ b/src/components/Dropdown/components/DropdownTitle.tsx
@@ -1,11 +1,19 @@
 import { type PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 import * as styles from '@components/Dropdown/style.css';
 
-const DropdownTitle = ({ children }: PropsWithChildren) => {
+interface DropdownTitleProps {
+  className?: string;
+}
+
+const DropdownTitle = ({
+  className,
+  children,
+}: PropsWithChildren<DropdownTitleProps>) => {
   return (
     <>
-      <div className={styles.dropdownTitle}>{children}</div>
+      <div className={clsx(className, styles.dropdownTitle)}>{children}</div>
       <div className={styles.line} />
     </>
   );
diff --git a/src/components/Layout/components/ProfileButton.tsx b/src/components/Layout/components/ProfileButton.tsx
index 106d56d..cf01e67 100644
--- a/src/components/Layout/components/ProfileButton.tsx
+++ b/src/components/Layout/components/ProfileButton.tsx
@@ -32,7 +32,7 @@ const ProfileButton = () => {
         <Icon icon="profileHeader" width={28} height={28} />
       </Dropdown.Trigger>
       <Dropdown.List>
-        <Dropdown.Title>
+        <Dropdown.Title className={styles.profileNameWrapper}>
           <Icon icon="profileDialog" width={40} height={40} />
           <span className={styles.profileName}>{data?.nickname}</span>님
         </Dropdown.Title>
diff --git a/src/components/Layout/style.css.ts b/src/components/Layout/style.css.ts
index 11084f5..32df3d7 100644
--- a/src/components/Layout/style.css.ts
+++ b/src/components/Layout/style.css.ts
@@ -64,6 +64,10 @@ export const profile = style({
   padding: '10px',
 });
 
+export const profileNameWrapper = style({
+  justifyContent: 'left',
+});
+
 export const dialogWrapper = style({
   padding: '10px',
 });