diff --git a/src/app/(layout)/advice/_components/AdviceInputArea/index.tsx b/src/app/(layout)/advice/_components/AdviceInputArea/index.tsx
index fce6cb0..f495d92 100644
--- a/src/app/(layout)/advice/_components/AdviceInputArea/index.tsx
+++ b/src/app/(layout)/advice/_components/AdviceInputArea/index.tsx
@@ -81,7 +81,7 @@ export default function AdviceInputArea({
       <p className="button-md">키워드 입력</p>
       <Spacing size={8} />
 
-      <div className="custom-scrollbar max-w-[760px] rotate-x-180 scroll-smooth">
+      <div className="custom-scrollbar-x max-w-[760px] rotate-x-180 scroll-smooth">
         <div className="mb-3 flex w-max rotate-x-180 flex-nowrap gap-2">
           {tags.map((tag) => (
             <InputTag
diff --git a/src/app/(layout)/advice/_components/RecommendTemplates/index.tsx b/src/app/(layout)/advice/_components/RecommendTemplates/index.tsx
index 604fc22..44d5883 100644
--- a/src/app/(layout)/advice/_components/RecommendTemplates/index.tsx
+++ b/src/app/(layout)/advice/_components/RecommendTemplates/index.tsx
@@ -60,7 +60,7 @@ export default function RecommendTemplates() {
           더 찾아보기
         </Link>
       </aside>
-      <section className="custom-scrollbar z-20 ml-4 flex w-[648px] flex-1 rotate-x-180 overflow-x-scroll scroll-smooth">
+      <section className="custom-scrollbar-x z-20 ml-4 flex w-[648px] flex-1 rotate-x-180 overflow-x-scroll scroll-smooth">
         <section className="mb-2 flex max-h-full rotate-x-180 gap-2">
           {templates.map((template) => (
             <Card
diff --git a/src/app/(layout)/explore/page.tsx b/src/app/(layout)/explore/page.tsx
index 8e51940..578f877 100644
--- a/src/app/(layout)/explore/page.tsx
+++ b/src/app/(layout)/explore/page.tsx
@@ -4,7 +4,6 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { Spacing } from '@/components/ui/Spacing';
 import TagSearchBar from '@/components/ui/TagSearchBar';
 import Card from '@/components/ui/Card';
-import CardTag from '@/components/ui/CardTag';
 import Arrow from '@/components/ui/Arrow';
 import WandIcon from '@/assets/icons/icon-lucide-wand.svg';
 import MagnifyIcon from '@/assets/icons/icon-magnify.svg';
@@ -25,7 +24,7 @@ export default function ExplorePage() {
   const [recommendTemplates, setRecommendTemplates] = useState<TemplateType[]>([]);
   const [allTemplates, setAllTemplates] = useState<TemplateType[]>([]);
   const [totalPages, setTotalPages] = useState(0);
-  const { openModal, closeModal, currentModal } = useModalStore();
+  const { openModal, currentModal } = useModalStore();
   const [userName, setUserName] = useState<string>('사용자');
 
   const tagOptions: TagType[] = [
@@ -204,36 +203,12 @@ export default function ExplorePage() {
     openModal('view', { templateId });
   };
 
-  // 모달 닫기 핸들러 (useModalStore의 closeModal을 사용하므로 이 함수는 선택 해제만 담당)
-  const clearSelectedTemplate = () => {
-    setSelectedTemplate(null);
-  };
-
   // 화면에 표시할 추천 템플릿 (3개씩)
   const visibleRecommendTemplates = recommendTemplates.slice(
     currentRecommendIndex,
     currentRecommendIndex + 3,
   );
 
-  // 템플릿 사용 핸들러
-  const handleUseTemplate = () => {
-    if (selectedTemplate?.content) {
-      navigator.clipboard
-        .writeText(selectedTemplate.content)
-        .then(() => {
-          alert('템플릿 내용이 클립보드에 복사되었습니다.');
-          console.log('템플릿 사용하기:', selectedTemplate.title);
-          closeModal();
-        })
-        .catch((err) => {
-          console.error('클립보드 복사 실패:', err);
-          alert('템플릿 복사에 실패했습니다. 다시 시도해주세요.');
-        });
-    } else {
-      alert('템플릿 내용이 없습니다.');
-    }
-  };
-
   // 모달 상태 변경 감지하여 카드 선택 해제
   useEffect(() => {
     if (currentModal === null && selectedTemplate) {
@@ -381,79 +356,6 @@ export default function ExplorePage() {
           </section>
         </section>
       </div>
-
-      {selectedTemplate && (
-        <div
-          className="fixed inset-0 z-50"
-          style={{
-            backgroundColor: 'rgba(0,0,0,0.05)',
-            backdropFilter: 'blur(3px)',
-          }}
-          onClick={clearSelectedTemplate}
-        >
-          <div className="flex h-full w-full items-center justify-center p-4">
-            <div
-              className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg bg-white p-6 shadow-lg"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="title-md text-layout-grey7">
-                  {selectedTemplate.title || '제목 없음'}
-                </h3>
-                <button
-                  onClick={clearSelectedTemplate}
-                  className="text-layout-grey6 hover:text-layout-grey7"
-                >
-                  닫기
-                </button>
-              </div>
-
-              <div className="mb-6">
-                <p className="body-md text-layout-grey7 mb-4">
-                  {selectedTemplate.description || '설명이 없는 템플릿입니다.'}
-                </p>
-                <div className="mt-3 flex flex-wrap gap-2">
-                  {selectedTemplate.tags && selectedTemplate.tags.length > 0 ? (
-                    selectedTemplate.tags.map((tag, idx) => <CardTag key={idx} text={tag} />)
-                  ) : (
-                    <p className="text-layout-grey5 text-sm">태그 정보가 없습니다.</p>
-                  )}
-                </div>
-              </div>
-
-              {selectedTemplate.content ? (
-                <div className="bg-layout-grey1 mt-4 mb-6 rounded-md p-4">
-                  <p className="text-layout-grey7 text-sm whitespace-pre-line">
-                    {selectedTemplate.content}
-                  </p>
-                </div>
-              ) : (
-                <div className="bg-layout-grey1 mt-4 mb-6 flex items-center justify-center rounded-md p-4">
-                  <p className="text-layout-grey6 py-8 text-sm">
-                    현재 템플릿 내용을 불러올 수 없습니다.
-                  </p>
-                </div>
-              )}
-
-              <div className="mt-6 flex justify-end gap-3">
-                <button
-                  className="border-layout-grey3 hover:bg-layout-grey1 rounded-md border px-4 py-2 transition-colors"
-                  onClick={clearSelectedTemplate}
-                >
-                  취소
-                </button>
-                <button
-                  className="bg-primary-navy4 hover:bg-primary-navy5 rounded-md px-4 py-2 text-white transition-colors"
-                  onClick={handleUseTemplate}
-                  disabled={!selectedTemplate.content}
-                >
-                  템플릿 사용하기
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </>
   );
 }
diff --git a/src/components/ui/Modal/EditModal/index.tsx b/src/components/ui/Modal/EditModal/index.tsx
index 80bb357..ee7f87c 100644
--- a/src/components/ui/Modal/EditModal/index.tsx
+++ b/src/components/ui/Modal/EditModal/index.tsx
@@ -181,7 +181,7 @@ export default function EditModal({
     <section className="bg-layout-white flex h-[700px] w-[1204px] flex-col rounded-[10px] p-9">
       {/* 태그 */}
       <section className="flex justify-between">
-        <div className="custom-scrollbar max-w-[760px] rotate-x-180 scroll-smooth">
+        <div className="custom-scrollbar-x max-w-[760px] rotate-x-180 scroll-smooth">
           <div className="mb-3 flex w-max rotate-x-180 flex-nowrap gap-2">
             {tags.map((tag) => (
               <InputTag
diff --git a/src/components/ui/Modal/ModalContainer.tsx b/src/components/ui/Modal/ModalContainer.tsx
index 7abaaa3..58341b6 100644
--- a/src/components/ui/Modal/ModalContainer.tsx
+++ b/src/components/ui/Modal/ModalContainer.tsx
@@ -5,6 +5,7 @@ import { useUnsaveModalStore } from '@/stores/useUnsaveModalStore';
 import ViewModal from './ViewModal';
 import EditModal from './EditModal';
 import UsingModal from './UsingModal';
+import ProfileModal from './ProfileModal';
 import UnSaveModal from './UnsaveModal';
 import { useEffect } from 'react';
 
@@ -34,6 +35,7 @@ export default function ModalContainer() {
           <div onClick={(e) => e.stopPropagation()}>
             {currentModal === 'view' && <ViewModal />}
             {currentModal === 'create' && <EditModal mode="create" draftContent={draftContent} />}
+            {currentModal === 'profile' && <ProfileModal />}
             {currentModal === 'edit' && selectedTemplateId != null && (
               <EditModal
                 mode="edit"
diff --git a/src/components/ui/Modal/ProfileModal/index.tsx b/src/components/ui/Modal/ProfileModal/index.tsx
new file mode 100644
index 0000000..e0560ff
--- /dev/null
+++ b/src/components/ui/Modal/ProfileModal/index.tsx
@@ -0,0 +1,105 @@
+import { useState, useMemo } from 'react';
+import Image from 'next/image';
+import Card from '@/components/ui/Card';
+import { Spacing } from '@/components/ui/Spacing';
+import { useAuthorDetail } from '@/hooks/template/useTemplateAuthor';
+import { useModalStore } from '@/stores/useModalStore';
+import IconClose from '@/assets/icons/icon-close.svg';
+import IconGlowScore from '@/assets/icons/icon-glow-score.svg';
+import IconArrowUpDown from '@/assets/icons/icon-arrow-up-down.svg';
+
+export default function ProfileModal() {
+  const [sortType, setSortType] = useState<'latest' | 'popular'>('popular');
+
+  const { selectedTemplateId, openModal, closeModal } = useModalStore();
+  const { data: authorData } = useAuthorDetail(selectedTemplateId as number);
+
+  const templates = authorData?.templates || [];
+
+  const templateSort = () => {
+    setSortType((prev) => (prev === 'latest' ? 'popular' : 'latest'));
+  };
+
+  const sortedTemplates = useMemo(() => {
+    if (sortType === 'popular') {
+      const sorted = [...templates].sort((a, b) => {
+        const aLikes = a.likeCount || 0;
+        const bLikes = b.likeCount || 0;
+        return bLikes - aLikes;
+      });
+      return sorted;
+    }
+
+    return templates;
+  }, [templates, sortType]);
+
+  const handleClickCard = (templateId: number) => {
+    closeModal();
+    openModal('view', { templateId });
+  };
+
+  return (
+    <section className="bg-layout-white flex h-[700px] w-[1204px] flex-col rounded-[10px] p-9">
+      <section className="flex items-start justify-between">
+        <section className="flex">
+          <Image
+            src={
+              authorData?.author.profileImageUrl ||
+              'https://github.com/user-attachments/assets/9c948b08-a78b-44cb-b572-f2a934b70c45'
+            }
+            alt="작성자 프로필"
+            width={100}
+            height={100}
+            className="rounded-sm"
+          />
+          <Spacing size={16} horizontal={true} />
+          <section className="flex flex-col gap-5">
+            <div className="title-lg mt-1">{authorData?.author.name}</div>
+            <div className="title-sm flex gap-2">
+              <IconGlowScore />
+              {authorData?.author.score}
+            </div>
+          </section>
+          <Spacing size={36} horizontal={true} />
+          <div className="border-l-layout-grey3 h-[100px] border-l-1" />
+          <Spacing size={36} horizontal={true} />
+          <div className="body-md flex flex-col items-center justify-center gap-2">
+            <div className="title-lg text-layout-grey6">{authorData?.templateTotalCount}</div>
+            작성한 템플릿
+          </div>
+        </section>
+        <button onClick={closeModal}>
+          <IconClose />
+        </button>
+      </section>
+
+      <Spacing size={52} />
+
+      <div className="w-full justify-items-end">
+        <button
+          onClick={templateSort}
+          className="bg-layout-grey1 hover:bg-layout-grey2 flex h-9 w-22 items-center justify-center gap-1 rounded-md transition-colors"
+        >
+          <IconArrowUpDown />
+          {sortType === 'popular' ? '인기순' : '최신순'}
+        </button>
+      </div>
+
+      <Spacing size={20} />
+
+      <section className="custom-scrollbar-y grid h-[420px] grid-cols-4 gap-3 overflow-auto">
+        {sortedTemplates.map((item) => (
+          <Card
+            key={`${item.templateId}-${sortType}`}
+            variant="medium"
+            title={item.title}
+            description={item.content}
+            tags={item.tags}
+            likes={item.likeCount}
+            onClick={() => handleClickCard(item.templateId as number)}
+          />
+        ))}
+      </section>
+    </section>
+  );
+}
diff --git a/src/components/ui/Modal/UsingModal/index.tsx b/src/components/ui/Modal/UsingModal/index.tsx
index c719fc3..582b9da 100644
--- a/src/components/ui/Modal/UsingModal/index.tsx
+++ b/src/components/ui/Modal/UsingModal/index.tsx
@@ -19,8 +19,9 @@ import Toast from '../../Toast';
 export default function UsingModal() {
   const router = useRouter();
 
-  const { selectedTemplateId, closeModal } = useModalStore();
+  const { selectedTemplateId, openModal, closeModal } = useModalStore();
   const { openUnsaveModal } = useUnsaveModalStore();
+  const [templateId, setTemplateId] = useState<number>();
   const [template, setTemplate] = useState<TemplateDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [content, setContent] = useState('');
@@ -40,6 +41,7 @@ export default function UsingModal() {
     const fetchTemplate = async () => {
       try {
         const data = await getTemplateDetail(selectedTemplateId);
+        setTemplateId(data?.templateId ?? 0);
         setTemplate(data);
         setContent(data?.content ?? '');
         setFolderId(data?.savedFolder?.folderId ?? 0);
@@ -93,6 +95,11 @@ export default function UsingModal() {
     setToastVisible(true);
   };
 
+  const handleAuthor = () => {
+    closeModal();
+    openModal('profile', { templateId: templateId });
+  };
+
   return (
     <section className="bg-layout-white flex h-[700px] w-[1204px] flex-col rounded-[10px] p-9">
       {/* 태그 */}
@@ -157,25 +164,30 @@ export default function UsingModal() {
       <section className="flex h-[80px] w-full items-end justify-between">
         {/* 작성자 정보 */}
         <section className="flex items-center gap-3">
-          <Image
-            src={
-              template.author.profileImageUrl ||
-              'https://github.com/user-attachments/assets/9c948b08-a78b-44cb-b572-f2a934b70c45'
-            }
-            alt="작성자 프로필"
-            width={80}
-            height={80}
-            className="rounded-sm"
-          />
+          <button onClick={handleAuthor}>
+            <Image
+              src={
+                template.author.profileImageUrl ||
+                'https://github.com/user-attachments/assets/9c948b08-a78b-44cb-b572-f2a934b70c45'
+              }
+              alt="작성자 프로필"
+              width={80}
+              height={80}
+              className="rounded-sm"
+            />
+          </button>
 
           <section className="flex gap-6">
-            <div className="flex flex-col items-center justify-center gap-[18px]">
+            <button
+              onClick={handleAuthor}
+              className="flex flex-col items-center justify-center gap-[18px]"
+            >
               <div className="title-sm flex">{template.author.name}</div>
               <div className="body-lg flex gap-1">
                 <IconGlowScore />
                 {template.author.score}
               </div>
-            </div>
+            </button>
 
             <div className="border-layout-grey5 flex h-16 w-0 border" />
 
diff --git a/src/components/ui/Modal/ViewModal/index.tsx b/src/components/ui/Modal/ViewModal/index.tsx
index 3cad65f..7b854db 100644
--- a/src/components/ui/Modal/ViewModal/index.tsx
+++ b/src/components/ui/Modal/ViewModal/index.tsx
@@ -97,6 +97,13 @@ export default function ViewModal() {
     setToastVisible(true);
   };
 
+  const handleAuthor = () => {
+    closeModal();
+    openModal('profile', {
+      templateId: template.templateId,
+    });
+  };
+
   return (
     <section className="bg-layout-white flex h-[700px] w-[1204px] flex-col rounded-[10px] p-9">
       {/* 태그 */}
@@ -167,25 +174,30 @@ export default function ViewModal() {
       <section className="flex h-[80px] w-full items-end justify-between">
         {/* 작성자 정보 */}
         <section className="flex items-center gap-3">
-          <Image
-            src={
-              template.author.profileImageUrl ||
-              'https://github.com/user-attachments/assets/9c948b08-a78b-44cb-b572-f2a934b70c45'
-            }
-            alt="작성자 프로필"
-            width={80}
-            height={80}
-            className="rounded-sm"
-          />
+          <button onClick={handleAuthor}>
+            <Image
+              src={
+                template.author.profileImageUrl ||
+                'https://github.com/user-attachments/assets/9c948b08-a78b-44cb-b572-f2a934b70c45'
+              }
+              alt="작성자 프로필"
+              width={80}
+              height={80}
+              className="rounded-sm"
+            />
+          </button>
 
           <section className="flex gap-6">
-            <div className="flex flex-col items-center justify-center gap-[18px]">
+            <button
+              onClick={handleAuthor}
+              className="flex flex-col items-center justify-center gap-[18px]"
+            >
               <div className="title-sm flex">{template.author.name}</div>
               <div className="body-lg flex gap-1">
                 <IconGlowScore />
                 {template.author.score}
               </div>
-            </div>
+            </button>
 
             <div className="border-layout-grey5 flex h-16 w-0 border" />
 
diff --git a/src/hooks/template/useCreateTemplate.ts b/src/hooks/template/useCreateTemplate.ts
index 4984c43..1b9de61 100644
--- a/src/hooks/template/useCreateTemplate.ts
+++ b/src/hooks/template/useCreateTemplate.ts
@@ -1,8 +1,8 @@
 import { createTemplate } from '@/services/template/postCreateTemplate';
-import { TemplateRequset } from '@/types/templateRequest';
+import { TemplateRequest } from '@/types/templateRequest';
 import { useMutation } from '@tanstack/react-query';
 
 export const useCreateTemplate = () =>
-  useMutation<void, Error, TemplateRequset>({
+  useMutation<void, Error, TemplateRequest>({
     mutationFn: (data) => createTemplate(data),
   });
diff --git a/src/hooks/template/useEditTemplate.ts b/src/hooks/template/useEditTemplate.ts
index 1a7449a..2d40cbf 100644
--- a/src/hooks/template/useEditTemplate.ts
+++ b/src/hooks/template/useEditTemplate.ts
@@ -1,10 +1,10 @@
 import { editTemplate } from '@/services/template/putEditTemplate';
-import { TemplateRequset } from '@/types/templateRequest';
+import { TemplateRequest } from '@/types/templateRequest';
 import { useMutation } from '@tanstack/react-query';
 
 export const useEditTemplate = () => {
   return useMutation({
-    mutationFn: ({ templateId, payload }: { templateId: number; payload: TemplateRequset }) =>
+    mutationFn: ({ templateId, payload }: { templateId: number; payload: TemplateRequest }) =>
       editTemplate(templateId, payload),
   });
 };
diff --git a/src/hooks/template/useTemplateAuthor.ts b/src/hooks/template/useTemplateAuthor.ts
new file mode 100644
index 0000000..e84a509
--- /dev/null
+++ b/src/hooks/template/useTemplateAuthor.ts
@@ -0,0 +1,10 @@
+import { getTemplateAuthor } from '@/services/template/getTemplateAuthor';
+import { useQuery } from '@tanstack/react-query';
+
+export const useAuthorDetail = (templateId: number) => {
+  return useQuery({
+    queryKey: ['author', templateId],
+    queryFn: () => getTemplateAuthor(templateId),
+    enabled: !!templateId,
+  });
+};
diff --git a/src/services/template/getTemplateAuthor.ts b/src/services/template/getTemplateAuthor.ts
new file mode 100644
index 0000000..de8c0eb
--- /dev/null
+++ b/src/services/template/getTemplateAuthor.ts
@@ -0,0 +1,26 @@
+import { customFetch } from '@/utils/customFetch';
+
+export interface AuthorRequest {
+  templateId?: number;
+  title: string;
+  content: string;
+  tags: string[];
+  isPrivate: boolean;
+  likeCount: number;
+}
+
+export interface AuthorDetail {
+  author: {
+    id: number;
+    name: string;
+    score: number;
+    profileImageUrl: string;
+  };
+  templateTotalCount: number;
+  templates: AuthorRequest[];
+}
+
+export const getTemplateAuthor = async (templateId: number): Promise<AuthorDetail | null> => {
+  const data = await customFetch<AuthorDetail>(`/templates/${templateId}/authors`);
+  return data ?? null;
+};
diff --git a/src/services/template/postCreateTemplate.ts b/src/services/template/postCreateTemplate.ts
index 1f214fc..fe37530 100644
--- a/src/services/template/postCreateTemplate.ts
+++ b/src/services/template/postCreateTemplate.ts
@@ -1,7 +1,7 @@
-import { TemplateRequset } from '@/types/templateRequest';
+import { TemplateRequest } from '@/types/templateRequest';
 import { customFetch } from '@/utils/customFetch';
 
-export const createTemplate = async (payload: TemplateRequset): Promise<void> => {
+export const createTemplate = async (payload: TemplateRequest): Promise<void> => {
   return customFetch('/templates', {
     method: 'POST',
     body: JSON.stringify(payload),
diff --git a/src/services/template/putEditTemplate.ts b/src/services/template/putEditTemplate.ts
index 6888c3c..6ddef6e 100644
--- a/src/services/template/putEditTemplate.ts
+++ b/src/services/template/putEditTemplate.ts
@@ -1,7 +1,7 @@
-import { TemplateRequset } from '@/types/templateRequest';
+import { TemplateRequest } from '@/types/templateRequest';
 import { customFetch } from '@/utils/customFetch';
 
-export const editTemplate = async (templateId: number, payload: TemplateRequset): Promise<void> => {
+export const editTemplate = async (templateId: number, payload: TemplateRequest): Promise<void> => {
   return customFetch(`/templates/${templateId}`, {
     method: 'PUT',
     body: JSON.stringify(payload),
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
index 2708ada..7a33a58 100644
--- a/src/styles/scrollbar.css
+++ b/src/styles/scrollbar.css
@@ -1,21 +1,43 @@
-.custom-scrollbar {
+.custom-scrollbar-x {
   overflow-x: scroll;
   scroll-behavior: smooth;
 }
 
-.custom-scrollbar::-webkit-scrollbar {
+.custom-scrollbar-x::-webkit-scrollbar {
   height: 4px;
 }
 
-.custom-scrollbar::-webkit-scrollbar-thumb {
+.custom-scrollbar-x::-webkit-scrollbar-thumb {
   background-color: #e0e0e0; /* grey2 */
   border-radius: 2px;
 }
 
-.custom-scrollbar::-webkit-scrollbar-track {
+.custom-scrollbar-x::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.custom-scrollbar::-webkit-scrollbar-button {
+.custom-scrollbar-x::-webkit-scrollbar-button {
+  display: none;
+}
+
+.custom-scrollbar-y {
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.custom-scrollbar-y::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar-y::-webkit-scrollbar-thumb {
+  background-color: #e0e0e0; /* grey2 */
+  border-radius: 2px;
+}
+
+.custom-scrollbar-y::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar-y::-webkit-scrollbar-button {
   display: none;
 }
diff --git a/src/types/templateRequest.ts b/src/types/templateRequest.ts
index 9271b92..2e5493f 100644
--- a/src/types/templateRequest.ts
+++ b/src/types/templateRequest.ts
@@ -1,4 +1,5 @@
-export interface TemplateRequset {
+export interface TemplateRequest {
+  templateId?: number;
   title: string;
   content: string;
   tags: string[];