diff --git a/src/api/axios/article/_type.ts b/src/api/axios/article/_type.ts
index 12fb8533..f37e2141 100644
--- a/src/api/axios/article/_type.ts
+++ b/src/api/axios/article/_type.ts
@@ -59,3 +59,14 @@ export interface PostArticleRequest {
 }
 
 export type PostArticleResponse = ArticleListItem;
+
+export interface PatchArticleRequest {
+  articleId: number;
+  body: {
+    image?: string | null;
+    content?: string;
+    title?: string;
+  };
+}
+
+export type PatchArticleResponse = ArticleDetail;
diff --git a/src/api/axios/article/patchArticle.ts b/src/api/axios/article/patchArticle.ts
new file mode 100644
index 00000000..63c7fed8
--- /dev/null
+++ b/src/api/axios/article/patchArticle.ts
@@ -0,0 +1,9 @@
+import { instance } from "@/lib";
+import { PatchArticleRequest, PatchArticleResponse } from "./_type";
+
+const patchArticle = async ({ articleId, body }: PatchArticleRequest) => {
+  const { data } = await instance.patch<PatchArticleResponse>(`/articles/${articleId}`, body);
+  return data;
+};
+
+export default patchArticle;
diff --git a/src/api/axios/index.ts b/src/api/axios/index.ts
index e0994366..1b303843 100644
--- a/src/api/axios/index.ts
+++ b/src/api/axios/index.ts
@@ -36,3 +36,4 @@ export { default as deleteArticleComment } from "./articleComment/deleteArticleC
 export { default as patchArticleComment } from "./articleComment/patchArticleComment";
 export { default as getInvitation } from "./group/getInvitation";
 export { default as deleteMember } from "./group/deleteMember";
+export { default as patchArticle } from "./article/patchArticle";
diff --git a/src/api/hooks/article/useGetArticlesInfinite.ts b/src/api/hooks/article/useGetArticlesInfinite.ts
new file mode 100644
index 00000000..8e27b0d1
--- /dev/null
+++ b/src/api/hooks/article/useGetArticlesInfinite.ts
@@ -0,0 +1,35 @@
+"use client";
+
+import { getArticles } from "@/api/axios";
+import { GetArticlesRequest } from "@/api/axios/article/_type";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+type UseGetArticlesInfiniteParams = Omit<GetArticlesRequest, "page"> & {
+  pageSize?: number;
+};
+
+const useGetArticlesInfinite = (params: UseGetArticlesInfiniteParams) => {
+  const { pageSize = 6, ...rest } = params;
+
+  return useInfiniteQuery({
+    queryKey: ["articles", rest],
+    queryFn: ({ pageParam = 1 }) =>
+      getArticles({
+        ...rest,
+        page: pageParam,
+        pageSize,
+      }),
+    initialPageParam: 1,
+
+    getNextPageParam: (lastPage, allPages) => {
+      const loadedCount = allPages.reduce((acc, page) => acc + page.list.length, 0);
+
+      return loadedCount < lastPage.totalCount ? allPages.length + 1 : undefined;
+    },
+
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 60 * 24,
+  });
+};
+
+export default useGetArticlesInfinite;
diff --git a/src/api/hooks/article/usePatchArticle.ts b/src/api/hooks/article/usePatchArticle.ts
new file mode 100644
index 00000000..63983e4b
--- /dev/null
+++ b/src/api/hooks/article/usePatchArticle.ts
@@ -0,0 +1,23 @@
+import { patchArticle } from "@/api/axios";
+import { toastKit } from "@/utils";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+const usePatchArticle = () => {
+  const { success, error } = toastKit();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ["patchArticle"],
+    mutationFn: patchArticle,
+    onSuccess: (data) => {
+      const articleId = data.id;
+      success("게시물을 성공적으로 수정하였습니다.");
+      queryClient.invalidateQueries({ queryKey: ["article", articleId] });
+    },
+    onError: () => {
+      error("게시물을 수정하지 못하였습니다.");
+    },
+  });
+};
+
+export default usePatchArticle;
diff --git a/src/api/hooks/article/usePostArticle.ts b/src/api/hooks/article/usePostArticle.ts
index d53c4d47..0452c011 100644
--- a/src/api/hooks/article/usePostArticle.ts
+++ b/src/api/hooks/article/usePostArticle.ts
@@ -1,16 +1,18 @@
 import { postArticle } from "@/api/axios";
 import { toastKit } from "@/utils";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
 const usePostArticle = () => {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { success, error } = toastKit();
   return useMutation({
     mutationFn: postArticle,
     onSuccess: (data) => {
       success("게시물 등록을 성공했습니다.");
-      router.push(`/dashboard/${data.id}`);
+      queryClient.invalidateQueries({ queryKey: ["articles"] });
+      router.replace(`/dashboard/${data.id}`);
     },
     onError: () => {
       error("게시물을 등록하지 못하였습니다.");
diff --git a/src/api/hooks/group/usePatchGroup.ts b/src/api/hooks/group/usePatchGroup.ts
index ed6113cd..f06e18c9 100644
--- a/src/api/hooks/group/usePatchGroup.ts
+++ b/src/api/hooks/group/usePatchGroup.ts
@@ -1,11 +1,9 @@
 import { patchGroup } from "@/api/axios";
 import { toastKit } from "@/utils";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
 
 const usePatchGroup = () => {
   const { success, error } = toastKit();
-  const router = useRouter();
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: patchGroup,
@@ -13,7 +11,6 @@ const usePatchGroup = () => {
       success("팀 이름을 성공적으로 변경하였습니다.");
       queryClient.invalidateQueries({ queryKey: ["groups"] });
       queryClient.invalidateQueries({ queryKey: ["user"] });
-      router.back();
     },
     onError: () => {
       error("팀 이름을 변경하지 못했습니다.");
diff --git a/src/api/hooks/index.ts b/src/api/hooks/index.ts
index bcbe1531..25b919cd 100644
--- a/src/api/hooks/index.ts
+++ b/src/api/hooks/index.ts
@@ -35,3 +35,4 @@ export { default as useDeleteArticleComment } from "./articleComment/useDeleteAr
 export { default as usePatchArticleComment } from "./articleComment/usePatchArticleComment";
 export { default as useGetInvitation } from "./group/useGetInvitation";
 export { default as useDeleteMember } from "./group/useDeleteMember";
+export { default as usePatchArticle } from "./article/usePatchArticle";
diff --git a/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx b/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
index ef3eb80b..d3076906 100644
--- a/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
+++ b/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
@@ -1,11 +1,17 @@
 import ArticleBody from "./_internal/ArticleBody";
 import ArticleComments from "./_internal/ArticleComments";
+import { LinkButton } from "@/common";
 
 const ArticleDetail = () => {
   return (
     <section className="bg-background-primary max-w-[900px] rounded-[20px] py-14 px-10">
       <ArticleBody />
       <ArticleComments />
+      <span className="flex-center">
+        <LinkButton className="w-full tablet:w-[250px]" href="/dashboard">
+          목록으로
+        </LinkButton>
+      </span>
     </section>
   );
 };
diff --git a/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx b/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx
new file mode 100644
index 00000000..bb14eb87
--- /dev/null
+++ b/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { usePatchArticle } from "@/api/hooks";
+import { BaseButton, Input, InputBox, Modal, Icon, FloatingButton } from "@/common";
+import { ArticleDetail } from "@/types/ArticleType";
+import { ChangeEvent, useState } from "react";
+import Image from "next/image";
+import useImageUpload from "@/hooks/useImageUpload";
+
+interface ArticleEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  article: ArticleDetail;
+}
+
+interface FormStateType {
+  title: string;
+  content: string;
+  image: string | null;
+}
+
+const ArticleEditModal = ({ isOpen, onClose, article }: ArticleEditModalProps) => {
+  const { mutate: patchArticle, isPending } = usePatchArticle();
+
+  const [formState, setFormState] = useState<FormStateType>({
+    title: article.title,
+    content: article.content,
+    image: article.image,
+  });
+
+  const { preview, file, handleImageChange, uploadImage, isUploading, clear } = useImageUpload(
+    article.image ?? undefined,
+  );
+
+  const isDisabledEditButton = isPending || isUploading || !formState.title.trim() || !formState.content.trim();
+
+  const handleTextChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormState((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleRemoveImage = () => {
+    clear();
+    setFormState((prev) => ({
+      ...prev,
+      image: null,
+    }));
+  };
+
+  const handleEditClick = async () => {
+    const { title, content } = formState;
+
+    let imageUrl: string | null = null;
+
+    if (file) {
+      imageUrl = await uploadImage();
+    }
+    const newForm = {
+      title,
+      content,
+      image: imageUrl !== null ? imageUrl : formState.image === null ? null : formState.image,
+    };
+    patchArticle(
+      {
+        articleId: article.id,
+        body: newForm,
+      },
+      {
+        onSuccess: () => {
+          onClose();
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.Body className="flex-col-center gap-4">
+        <h3 className="text-text-primary text-lg-bold">게시글 수정하기</h3>
+
+        <form className="w-full flex flex-col gap-4">
+          <label htmlFor="articleTitle" className="text-text-primary text-lg-bold">
+            제목
+          </label>
+          <Input id="articleTitle" name="title" value={formState.title} onChange={handleTextChange} />
+
+          <InputBox
+            name="content"
+            label="내용"
+            value={formState.content}
+            onChange={handleTextChange}
+            textareaClassName="h-[300px]"
+          />
+
+          <div className="flex flex-col gap-2">
+            <label className="text-text-primary text-lg-bold">이미지</label>
+            <input
+              id="articleImgEdit"
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(e) => {
+                const selectedFile = e.target.files?.[0];
+                if (selectedFile) handleImageChange(selectedFile);
+              }}
+            />
+
+            <div className="relative size-[120px]">
+              <label
+                htmlFor="articleImgEdit"
+                className="w-full h-full rounded-xl border border-border-primary flex-center cursor-pointer overflow-hidden hover:border-state-400 transition relative"
+              >
+                {preview ? (
+                  <Image src={preview} alt="미리보기" fill className="object-cover" />
+                ) : (
+                  <span className="flex flex-col items-center gap-2 text-text-300 text-sm">
+                    <Icon name="imgUpload" />
+                  </span>
+                )}
+              </label>
+
+              {preview && (
+                <FloatingButton
+                  iconName="x"
+                  type="button"
+                  onClick={handleRemoveImage}
+                  className="absolute -top-2 -right-2 w-6 h-6 rounded-full flex-center"
+                />
+              )}
+            </div>
+          </div>
+        </form>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <BaseButton onClick={onClose} variant="outlinedSecondary" size="large">
+          닫기
+        </BaseButton>
+
+        <BaseButton
+          type="button"
+          onClick={handleEditClick}
+          variant="solid"
+          size="large"
+          disabled={isDisabledEditButton}
+        >
+          {isPending || isUploading ? "수정 중..." : "수정하기"}
+        </BaseButton>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default ArticleEditModal;
diff --git a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
index bd5e22fd..5d18ee31 100644
--- a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
+++ b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
@@ -8,7 +8,7 @@ import ArticleTitle from "../../../_components/Article/_internal/ArticleTitle";
 import ArticleWriter from "../../../_components/Article/_internal/ArticleWriter";
 import ArticleContent from "../../../_components/Article/_internal/ArticleContent";
 import ArticleLikeButton from "./ArticleLikeButton";
-import ArticleEditModal from "./ArticleEditModal";
+import ArticleEditModal from "../Modal/ArticleEditModal";
 import { useState } from "react";
 
 const ArticleBody = () => {
@@ -46,12 +46,19 @@ const ArticleBody = () => {
       </div>
 
       <div className="pt-6">
-        <ArticleContent content={article.content} />
+        <ArticleContent content={article.content} image={article.image} imgSize={200} />
       </div>
 
       <ArticleLikeButton />
 
-      <ArticleEditModal isOpen={isOpenEditModal} onClose={() => setIsOpenEditModal(false)} />
+      {isOpenEditModal && (
+        <ArticleEditModal
+          key={article.id}
+          isOpen={isOpenEditModal}
+          onClose={() => setIsOpenEditModal(false)}
+          article={article}
+        />
+      )}
     </section>
   );
 };
diff --git a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx
deleted file mode 100644
index 29ef4832..00000000
--- a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Modal } from "@/common";
-
-interface ArticleEditModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const ArticleEditModal = ({ isOpen, onClose }: ArticleEditModalProps) => {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <Modal.Body>
-        <h3>게시글 수정하기</h3>
-      </Modal.Body>
-    </Modal>
-  );
-};
-
-export default ArticleEditModal;
diff --git a/src/app/(route)/dashboard/[id]/page.tsx b/src/app/(route)/dashboard/[id]/page.tsx
index 93232390..2f6d81ff 100644
--- a/src/app/(route)/dashboard/[id]/page.tsx
+++ b/src/app/(route)/dashboard/[id]/page.tsx
@@ -1,5 +1,11 @@
 import { PageLayout } from "@/common";
 import { ArticleDetail } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 자유게시판",
+  description: "게시글을 통해 팀원들과 소통해보세요.",
+};
 
 const DashBoardDetail = () => {
   return (
diff --git a/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx b/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
index 9ceff105..8208028b 100644
--- a/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
+++ b/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import Image from "next/image";
 import { useGetArticle } from "@/api/hooks";
 import { Icon } from "@/common";
 import ArticleBestBadge from "./_internal/ArticleBestBadge";
@@ -17,14 +16,12 @@ const BestArticleCard = ({ articleId }: { articleId: number }) => {
 
   return (
     <Link href={`/dashboard/${articleId}`} className="block">
-      <article className="flex flex-col gap-3 max-w-[350px] pc:gap-4 rounded-[20px] border bg-background-primary px-5 py-6">
+      <article className="h-full flex flex-col gap-3 pc:gap-4 rounded-[20px] border bg-background-primary px-5 py-6">
         <ArticleBestBadge />
-        <div className="flex justify-between gap-4">
-          <div className="flex flex-col gap-3">
-            <ArticleTitle title={article?.title} />
-            <ArticleContent content={article?.content} />
-          </div>
-          {/* {article.image && <Image src={article.image} alt="게시글 이미지" width={60} height={60} />} */}
+
+        <div className="flex flex-col gap-4">
+          <ArticleTitle title={article?.title} />
+          <ArticleContent content={article?.content} image={article.image} imgSize={60} layout="row" />
         </div>
 
         <footer className="flex justify-between items-center">
diff --git a/src/app/(route)/dashboard/_components/Article/DefaultArticleCard.tsx b/src/app/(route)/dashboard/_components/Article/DefaultArticleCard.tsx
index 0b515c53..62ed0a9a 100644
--- a/src/app/(route)/dashboard/_components/Article/DefaultArticleCard.tsx
+++ b/src/app/(route)/dashboard/_components/Article/DefaultArticleCard.tsx
@@ -17,11 +17,10 @@ const DefaultArticleCard = ({ articleId }: { articleId: number }) => {
     <Link href={`/dashboard/${article.id}`} className="block">
       <article className="flex flex-col gap-3 w-full pc:gap-4 rounded-[20px] border bg-background-primary px-5 py-6">
         <div className="flex justify-between gap-4">
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col w-full gap-3">
             <ArticleTitle title={article?.title} />
-            <ArticleContent content={article?.content} />
+            <ArticleContent content={article?.content} image={article.image} imgSize={60} layout="row" />
           </div>
-          {/* {article.image && <Image src={article.image} alt="게시글 이미지" width={60} height={60} />} */}
         </div>
         <footer className="flex justify-between items-center">
           <ArticleWriter nickname={article.writer.nickname} createdAt={article.createdAt} />
diff --git a/src/app/(route)/dashboard/_components/Article/_internal/ArticleContent.tsx b/src/app/(route)/dashboard/_components/Article/_internal/ArticleContent.tsx
index 5ed82541..6e7b91a4 100644
--- a/src/app/(route)/dashboard/_components/Article/_internal/ArticleContent.tsx
+++ b/src/app/(route)/dashboard/_components/Article/_internal/ArticleContent.tsx
@@ -1,5 +1,42 @@
-const ArticleContent = ({ content }: { content: string }) => {
-  return <p className="text-md-regular text-text-default line-clamp-2 overflow-hidden break-all">{content}</p>;
+import { cn } from "@/utils";
+import Image from "next/image";
+
+interface ArticleContentProps {
+  content: string;
+  image: string | null;
+  imgSize: number;
+  layout?: "row" | "column";
+}
+
+const ArticleContent = ({ content, image, imgSize, layout = "column" }: ArticleContentProps) => {
+  const isRow = layout === "row";
+  const isValidImageUrl = (url: string) => {
+    try {
+      const parsed = new URL(url);
+
+      const allowedHosts = ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"];
+
+      return allowedHosts.includes(parsed.hostname);
+    } catch {
+      return false;
+    }
+  };
+  return (
+    <div className={cn("min-h-[60px]", isRow ? "flex items-center justify-between gap-3" : "flex flex-col")}>
+      <p className="flex-1 text-md-regular text-text-default line-clamp-1 overflow-hidden break-all">{content}</p>
+
+      {image && isValidImageUrl(image) && (
+        <Image
+          src={image}
+          alt="게시글 이미지"
+          quality={100}
+          width={imgSize}
+          height={imgSize}
+          className="shrink-0 rounded-xl object-cover"
+        />
+      )}
+    </div>
+  );
 };
 
 export default ArticleContent;
diff --git a/src/app/(route)/dashboard/_components/Article/_internal/ArticleLike.tsx b/src/app/(route)/dashboard/_components/Article/_internal/ArticleLike.tsx
index ba20daeb..764df19d 100644
--- a/src/app/(route)/dashboard/_components/Article/_internal/ArticleLike.tsx
+++ b/src/app/(route)/dashboard/_components/Article/_internal/ArticleLike.tsx
@@ -1,5 +1,7 @@
+import { formatClampedCount } from "@/utils";
+
 const ArticleLike = ({ likeCount }: { likeCount: number }) => {
-  const count = likeCount > 999 ? "999+" : String(likeCount);
+  const count = formatClampedCount(likeCount, 999);
   return <span className="text-md-regular text-state-400">{count}</span>;
 };
 
diff --git a/src/app/(route)/dashboard/write/_components/ArticleForm.tsx b/src/app/(route)/dashboard/write/_components/ArticleForm.tsx
index 8df0b575..8602f7b2 100644
--- a/src/app/(route)/dashboard/write/_components/ArticleForm.tsx
+++ b/src/app/(route)/dashboard/write/_components/ArticleForm.tsx
@@ -1,31 +1,32 @@
 "use client";
 
 import Image from "next/image";
-import { Input, InputBox, BaseButton, Icon } from "@/common";
+import { Input, InputBox, BaseButton, Icon, FloatingButton } from "@/common";
 import { ChangeEvent, FormEvent, useState } from "react";
-import { postImageUpload } from "@/api/axios";
 import { usePostArticle } from "@/api/hooks";
 import { INPUT_AREA_STYLE, LABEL_STYLE } from "../_constants/STYLE";
-import { MAX_IMAGE_SIZE } from "../_constants/MAX_IMAGE_SIZE";
 import { toastKit } from "@/utils";
+import useImageUpload from "@/hooks/useImageUpload";
 
 interface FormStateType {
   title: string;
   content: string;
-  image: File | null;
 }
 
 const ArticleForm = () => {
   const { mutate: postArticle, isPending } = usePostArticle();
-  const [preview, setPreview] = useState<string | null>(null);
+
   const [formState, setFormState] = useState<FormStateType>({
     title: "",
     content: "",
-    image: null,
   });
 
+  const { preview, file, handleImageChange, uploadImage, isUploading, clear } = useImageUpload();
+
   const { error } = toastKit();
 
+  const isSubmitDisabled = isPending || isUploading || !formState.title.trim() || !formState.content.trim();
+
   const handleTextChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormState((prev) => ({
@@ -34,44 +35,32 @@ const ArticleForm = () => {
     }));
   };
 
-  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) {
-      return;
-    }
-    if (file.size > MAX_IMAGE_SIZE) {
-      error("이미지 파일, 최대 용량은 10MB입니다.");
-      e.target.value = "";
-      return;
-    }
-
-    if (preview) {
-      URL.revokeObjectURL(preview);
-    }
-
-    const previewUrl = URL.createObjectURL(file);
-    setPreview(previewUrl);
-    setFormState((prev) => ({
-      ...prev,
-      image: file,
-    }));
+  const handleRemoveImage = () => {
+    clear();
   };
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const { title, content, image } = formState;
+    const { title, content } = formState;
 
     try {
-      const imageURL = image && (await postImageUpload(image));
+      let imageUrl: string | null = null;
+
+      if (file) {
+        imageUrl = await uploadImage();
+      }
+
       const newFormData = {
-        title: title,
-        content: content,
-        ...(imageURL && { image: imageURL }),
+        title,
+        content,
+        ...(imageUrl && { image: imageUrl }),
       };
+
       postArticle(newFormData);
-    } catch (error) {
-      console.error(error);
+    } catch (err) {
+      console.error(err);
+      error("게시글 등록 중 오류가 발생했습니다.");
     }
   };
 
@@ -88,7 +77,7 @@ const ArticleForm = () => {
           value={formState.title}
           onChange={handleTextChange}
           required
-          maxLength={30}
+          maxLength={40}
         />
       </div>
 
@@ -108,23 +97,45 @@ const ArticleForm = () => {
 
       <div className={INPUT_AREA_STYLE}>
         <label className={LABEL_STYLE}>이미지</label>
-        <input id="articleImg" type="file" accept="image/*" className="hidden" onChange={handleImageChange} />
-
-        <label
-          htmlFor="articleImg"
-          className="size-[120px] rounded-xl border border-border-primary flex-center cursor-pointer overflow-hidden hover:border-state-400 transition relative"
-        >
-          {preview ? (
-            <Image src={preview} alt="미리보기" fill className="w-full h-full object-cover" />
-          ) : (
-            <span className="flex-cols-center gap-2">
-              <Icon name="imgUpload" />
-            </span>
+
+        <input
+          id="articleImg"
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => {
+            const selectedFile = e.target.files?.[0];
+            if (selectedFile) handleImageChange(selectedFile);
+          }}
+        />
+
+        <div className="relative size-[120px]">
+          <label
+            htmlFor="articleImg"
+            className="w-full h-full rounded-xl border border-border-primary flex-center cursor-pointer overflow-hidden hover:border-state-400 transition relative"
+          >
+            {preview ? (
+              <Image src={preview} alt="미리보기" fill className="object-cover" />
+            ) : (
+              <span className="flex flex-col items-center gap-2 text-text-300 text-sm">
+                <Icon name="imgUpload" />
+              </span>
+            )}
+          </label>
+
+          {preview && (
+            <FloatingButton
+              iconName="x"
+              type="button"
+              onClick={handleRemoveImage}
+              className="absolute -top-2 -right-2 w-6 h-6 rounded-full flex-center"
+            />
           )}
-        </label>
+        </div>
       </div>
-      <BaseButton type="submit" variant="solid" size="large" disabled={isPending}>
-        {isPending ? "등록 중..." : "등록하기"}
+
+      <BaseButton type="submit" variant="solid" size="large" disabled={isSubmitDisabled}>
+        {isPending || isUploading ? "등록 중..." : "등록하기"}
       </BaseButton>
     </form>
   );
diff --git a/src/app/(route)/dashboard/write/page.tsx b/src/app/(route)/dashboard/write/page.tsx
index 6d81b99c..d64b8d36 100644
--- a/src/app/(route)/dashboard/write/page.tsx
+++ b/src/app/(route)/dashboard/write/page.tsx
@@ -1,5 +1,11 @@
 import { PageLayout } from "@/common";
 import { ArticleForm } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 글쓰기",
+  description: "게시글을 작성하여 팀원들과 공유해보세요.",
+};
 
 const DashboardWritePage = () => {
   return (
diff --git a/src/app/(route)/login/page.tsx b/src/app/(route)/login/page.tsx
index aee75610..efcf1a12 100644
--- a/src/app/(route)/login/page.tsx
+++ b/src/app/(route)/login/page.tsx
@@ -1,5 +1,16 @@
 import { LoginForm } from "./_components";
 import { CenteredCardLayout, SocialAuthSection } from "../_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 로그인 페이지",
+  description: "팀원들과 함께하는 일정 관리 서비스. 함께 일정을 계획하고 관리해보세요.",
+  openGraph: {
+    title: "Coworkers",
+    description: "팀원들과 함께하는 일정 관리 서비스. 함께 일정을 계획하고 관리해보세요.",
+    type: "website",
+  },
+};
 
 const LoginPage = () => {
   return (
diff --git a/src/app/(route)/signup/page.tsx b/src/app/(route)/signup/page.tsx
index 8928b3ef..10569fa7 100644
--- a/src/app/(route)/signup/page.tsx
+++ b/src/app/(route)/signup/page.tsx
@@ -1,5 +1,16 @@
 import { SignUpForm } from "./_components";
 import { CenteredCardLayout, SocialAuthSection } from "../_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 회원가입",
+  description: "회원가입 후 Coworkers 서비스를 이용해보세요.",
+  openGraph: {
+    title: "Coworkers",
+    description: "팀원들과 함께하는 일정 관리 서비스. 함께 일정을 계획하고 관리해보세요.",
+    type: "website",
+  },
+};
 
 const SignUpPage = () => {
   return (
diff --git a/src/app/(route)/team-creation/page.tsx b/src/app/(route)/team-creation/page.tsx
index 397fce0e..f25b828a 100644
--- a/src/app/(route)/team-creation/page.tsx
+++ b/src/app/(route)/team-creation/page.tsx
@@ -1,6 +1,12 @@
+import { Metadata } from "next";
 import { CenteredCardLayout } from "../_components";
 import { TeamCreateForm } from "./_components/";
 
+export const metadata: Metadata = {
+  title: "Coworkers | 팀 생성하기",
+  description: "팀을 생성하여 팀을 꾸려보세요.",
+};
+
 const TeamCreatePage = () => {
   return (
     <CenteredCardLayout
diff --git a/src/app/(route)/team-join/page.tsx b/src/app/(route)/team-join/page.tsx
index 83ed4ba1..40a9bc81 100644
--- a/src/app/(route)/team-join/page.tsx
+++ b/src/app/(route)/team-join/page.tsx
@@ -1,5 +1,11 @@
 import { CenteredCardLayout } from "../_components";
 import { TeamJoinForm } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 팀 참여하기",
+  description: "공유받은 팀 링크를 입력해 참여할 수 있어요.",
+};
 
 const TeamJoinPage = () => {
   return (
diff --git a/src/app/(route)/team/[teamId]/_components/MemberWidget/MemberWidget.tsx b/src/app/(route)/team/[teamId]/_components/MemberWidget/MemberWidget.tsx
index ea0d7ab2..44d70fd7 100644
--- a/src/app/(route)/team/[teamId]/_components/MemberWidget/MemberWidget.tsx
+++ b/src/app/(route)/team/[teamId]/_components/MemberWidget/MemberWidget.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useGetGroups, useGetInvitation } from "@/api/hooks";
-import { BaseButton, FloatingButton, Modal } from "@/common";
+import { useGetGroups } from "@/api/hooks";
+import { FloatingButton } from "@/common";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import WidgetProfile from "./_internal/WidgetProfile";
diff --git a/src/app/(route)/team/[teamId]/_components/TaskSection/TaskSection.tsx b/src/app/(route)/team/[teamId]/_components/TaskSection/TaskSection.tsx
index db4ba74e..b723051f 100644
--- a/src/app/(route)/team/[teamId]/_components/TaskSection/TaskSection.tsx
+++ b/src/app/(route)/team/[teamId]/_components/TaskSection/TaskSection.tsx
@@ -22,7 +22,7 @@ const TaskSection = () => {
   const todoCount = getUncompletedTaskCount(taskLists);
 
   return (
-    <section className="w-full max-w-[842px]">
+    <section className="w-full max-w-[842px] pb-20">
       <span className="flex gap-2 my-8">
         <span className="text-lg-medium text-text-primary">할 일 목록</span>
         <span className="text-lg-regular text-text-default">{todoCount}개</span>
diff --git a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/CreateTaskListModal.tsx b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/CreateTaskListModal.tsx
new file mode 100644
index 00000000..8d0d6c1b
--- /dev/null
+++ b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/CreateTaskListModal.tsx
@@ -0,0 +1,51 @@
+import { BaseButton, Input, Modal } from "@/common";
+import { usePostTaskList } from "@/api/hooks";
+import { useParams } from "next/navigation";
+import { ChangeEvent, useState } from "react";
+
+interface CreateTaskListModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const CreateTaskListModal = ({ isOpen, onClose }: CreateTaskListModalProps) => {
+  const [taskValue, setTaskValue] = useState("");
+
+  const { mutate: postTaskList, isPending } = usePostTaskList();
+  const { teamId } = useParams();
+
+  const isDisabledCreateButton = isPending || !taskValue.trim();
+
+  const handleCreateTaskClick = () => {
+    postTaskList(
+      { groupId: Number(teamId), name: taskValue },
+      {
+        onSuccess: () => {
+          onClose();
+          setTaskValue("");
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.CloseIcon onClose={onClose} />
+      <Modal.Body className="flex-col-center gap-2">
+        <h3>할 일 목록</h3>
+        <Input
+          value={taskValue}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setTaskValue(e.target.value)}
+          placeholder="목록 명을 입력해주세요."
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <BaseButton variant="solid" size="large" onClick={handleCreateTaskClick} disabled={isDisabledCreateButton}>
+          {isPending ? "만드는 중..." : "만들기"}
+        </BaseButton>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default CreateTaskListModal;
diff --git a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/EditTaskListModal.tsx b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/EditTaskListModal.tsx
index 055d9170..bf233d23 100644
--- a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/EditTaskListModal.tsx
+++ b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/Modal/EditTaskListModal.tsx
@@ -15,11 +15,16 @@ const EditTaskListModal = ({ isOpen, onClose, groupId, taskList }: EditTaskListM
 
   const [title, setTitle] = useState("");
 
+  const isDisabledEditButton = isPending || !title.trim();
+
   const handleEditClick = () => {
     patchTask(
       { groupId, id: taskList.id, name: title },
       {
-        onSuccess: () => onClose(),
+        onSuccess: () => {
+          onClose();
+          setTitle("");
+        },
       },
     );
   };
@@ -35,7 +40,7 @@ const EditTaskListModal = ({ isOpen, onClose, groupId, taskList }: EditTaskListM
         />
       </Modal.Body>
       <Modal.Footer>
-        <BaseButton onClick={handleEditClick} variant="solid" size="large" disabled={isPending}>
+        <BaseButton onClick={handleEditClick} variant="solid" size="large" disabled={isDisabledEditButton}>
           {isPending ? "수정 중..." : "수정하기"}
         </BaseButton>
       </Modal.Footer>
diff --git a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskCard/TaskCard.tsx b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskCard/TaskCard.tsx
index 906b64a2..0b4fa3dd 100644
--- a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskCard/TaskCard.tsx
+++ b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskCard/TaskCard.tsx
@@ -23,10 +23,12 @@ const TaskHeader = ({ name, taskList }: { name: string; taskList: TaskList }) =>
       <Link href={`/team/${teamId}/task-list/${taskListId}`} className="text-lg-semibold text-text-primary">
         {name}
       </Link>
-      <div className="flex items-center  leading-none">
+
+      <div className="flex items-center leading-none">
         <ProgressBadge current={completedCount} total={totalTasks} />
         <Dropdown
           iconName="kebab"
+          placement="bottom-right"
           iconClassName="size-6 tablet:size-6 text-state-300"
           options={[
             { label: "수정하기", action: () => setIsOpenEditModal(true) },
diff --git a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskColumn/TaskColumn.tsx b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskColumn/TaskColumn.tsx
index d12294c0..83d1971c 100644
--- a/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskColumn/TaskColumn.tsx
+++ b/src/app/(route)/team/[teamId]/_components/TaskSection/_internal/TaskColumn/TaskColumn.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-import { BaseButton, Input, Modal, ProgressButton } from "@/common";
+import { ProgressButton } from "@/common";
 import TaskCard from "../TaskCard/TaskCard";
-import { ChangeEvent, useState } from "react";
-import { usePostTaskList } from "@/api/hooks";
-import { useParams } from "next/navigation";
+import { useState } from "react";
 import { TaskList } from "@/types";
+import CreateTaskListModal from "../Modal/CreateTaskListModal";
 
 type ColumnTitle = "할 일" | "진행중" | "완료";
 
@@ -15,25 +14,10 @@ interface TaskColumnProps {
 }
 
 const TaskColumn = ({ title, items }: TaskColumnProps) => {
-  const { mutate: postTaskList, isPending } = usePostTaskList();
-  const { teamId } = useParams();
-  const [taskValue, setTaskValue] = useState("");
   const [isOpenCreateTaskModal, setIsOpenCreateTaskModal] = useState(false);
 
   const isRenderList = title !== "완료";
 
-  const handleCreateTaskClick = () => {
-    postTaskList(
-      { groupId: Number(teamId), name: taskValue },
-      {
-        onSuccess: () => {
-          setIsOpenCreateTaskModal(false);
-          setTaskValue("");
-        },
-      },
-    );
-  };
-
   return (
     <section className="flex-1 flex flex-col gap-5">
       <ProgressButton onClick={() => setIsOpenCreateTaskModal(true)} text={title} className="w-full h-[38px]" />
@@ -41,22 +25,7 @@ const TaskColumn = ({ title, items }: TaskColumnProps) => {
         <TaskCard key={item.id} item={item} isRenderList={isRenderList} />
       ))}
 
-      <Modal isOpen={isOpenCreateTaskModal} onClose={() => setIsOpenCreateTaskModal(false)}>
-        <Modal.CloseIcon onClose={() => setIsOpenCreateTaskModal(false)} />
-        <Modal.Body className="flex-col-center gap-2">
-          <h3>할 일 목록</h3>
-          <Input
-            value={taskValue}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setTaskValue(e.target.value)}
-            placeholder="목록 명을 입력해주세요."
-          />
-        </Modal.Body>
-        <Modal.Footer>
-          <BaseButton variant="solid" size="large" onClick={handleCreateTaskClick} disabled={isPending}>
-            {isPending ? "만드는 중..." : "만들기"}
-          </BaseButton>
-        </Modal.Footer>
-      </Modal>
+      <CreateTaskListModal isOpen={isOpenCreateTaskModal} onClose={() => setIsOpenCreateTaskModal(false)} />
     </section>
   );
 };
diff --git a/src/app/(route)/team/[teamId]/edit/_components/EditTeamForm/EditTeamForm.tsx b/src/app/(route)/team/[teamId]/edit/_components/EditTeamForm/EditTeamForm.tsx
index 9051107d..106782ce 100644
--- a/src/app/(route)/team/[teamId]/edit/_components/EditTeamForm/EditTeamForm.tsx
+++ b/src/app/(route)/team/[teamId]/edit/_components/EditTeamForm/EditTeamForm.tsx
@@ -1,67 +1,71 @@
 "use client";
 
+import { FormEvent } from "react";
 import { useDevice } from "@/hooks";
-import { ProfileEdit, Input, BaseButton } from "@/common";
-import { useGetGroups, usePatchGroup } from "@/api/hooks";
-import { ChangeEvent, FormEvent, useState } from "react";
+import { ProfileEdit, Input, BaseButton, FloatingButton } from "@/common";
+import { useTeamEdit } from "../../_hooks";
 import { useParams } from "next/navigation";
-import Link from "next/link";
-
-const EditTeamForm = () => {
-  const [formData, setFormData] = useState({
-    image: null, // TODO(상인): 이미지 편집이 완료되면 구현 string | null
-    name: "",
-  });
 
+const TeamEditForm = () => {
   const { isMobile } = useDevice();
+  const profileSize = isMobile ? "md" : "lg";
   const { teamId } = useParams();
   const id = Number(teamId);
-  const { data: groups } = useGetGroups({ id });
-
-  const { mutate: patchGroup } = usePatchGroup();
-
-  const profileSize = isMobile ? "md" : "lg";
 
-  // 이미지 수정에 따라 변경될 수도
-  const handleFormDataChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
+  const {
+    name,
+    errorMessage,
+    preview,
+    isValid,
+    isSubmitting,
+    handleNameChange,
+    handleImageChange,
+    handleSubmit,
+    handleRemoveImage,
+  } = useTeamEdit(id);
 
-  const handleEditSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const onSubmit = (e: FormEvent) => {
     e.preventDefault();
-    patchGroup({ param: { id }, body: formData });
+    handleSubmit();
   };
 
   return (
-    <form onSubmit={handleEditSubmit} className="w-full flex-col-center gap-10">
+    <form onSubmit={onSubmit} className="w-full flex-col-center gap-10">
       <div className="w-full flex-col-center gap-3 tablet:gap-6">
-        <ProfileEdit src={null} onChange={() => {}} size={profileSize} />
+        <div className="relative">
+          <ProfileEdit iconType="imgUpload" src={preview || null} onChange={handleImageChange} size={profileSize} />
+          {preview && (
+            <FloatingButton
+              iconName="x"
+              type="button"
+              onClick={handleRemoveImage}
+              className="absolute -top-1 -right-1 size-6"
+            />
+          )}
+        </div>
         <Input
           label="팀 이름"
-          name="name"
           type="text"
-          placeholder={groups?.name}
-          value={formData.name}
-          onChange={handleFormDataChange}
+          placeholder="팀 이름을 입력해주세요."
+          value={name}
+          onChange={(e) => handleNameChange(e.target.value)}
+          error={errorMessage}
+          minLength={2}
+          maxLength={30}
         />
       </div>
-      <div className="w-full flex-col-center gap-2">
-        <p className="text-xs-regular text-text-default tablet:text-lg-regular text-center pb-4">
+
+      <div className="w-full flex-col-center gap-5">
+        <BaseButton type="submit" variant="solid" size="large" className="w-full" disabled={!isValid || isSubmitting}>
+          {isSubmitting ? "수정 중..." : "수정하기"}
+        </BaseButton>
+
+        <p className="text-xs-regular text-text-default tablet:text-lg-regular text-center">
           팀 이름은 회사명이나 모임 이름 등으로 설정하면 좋아요.
         </p>
-        <BaseButton type="submit" variant="solid" size="large" className="w-full">
-          수정하기
-        </BaseButton>
-        {/* TODO(상인): 추후 as prop */}
-        <Link href={`/team/${teamId}`} className="w-full">
-          <BaseButton type="button" variant="outlinedSecondary" size="large" className="w-full">
-            돌아가기
-          </BaseButton>
-        </Link>
       </div>
     </form>
   );
 };
 
-export default EditTeamForm;
+export default TeamEditForm;
diff --git a/src/app/(route)/team/[teamId]/edit/_hooks/index.ts b/src/app/(route)/team/[teamId]/edit/_hooks/index.ts
new file mode 100644
index 00000000..faeb8130
--- /dev/null
+++ b/src/app/(route)/team/[teamId]/edit/_hooks/index.ts
@@ -0,0 +1 @@
+export { default as useTeamEdit } from "./useTeamEdit";
diff --git a/src/app/(route)/team/[teamId]/edit/_hooks/useTeamEdit.ts b/src/app/(route)/team/[teamId]/edit/_hooks/useTeamEdit.ts
new file mode 100644
index 00000000..b6b5fe0f
--- /dev/null
+++ b/src/app/(route)/team/[teamId]/edit/_hooks/useTeamEdit.ts
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useGetGroups, usePatchGroup } from "@/api/hooks";
+import useImageUpload from "@/hooks/useImageUpload";
+
+const useTeamEdit = (teamId: number) => {
+  const router = useRouter();
+  const { data: group } = useGetGroups({ id: teamId });
+  const { mutateAsync: patchGroup } = usePatchGroup();
+
+  const [name, setName] = useState(group?.name ?? "");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const originImage = group?.image ?? null;
+
+  const { preview, file, handleImageChange, uploadImage, clear } = useImageUpload(originImage ?? undefined);
+
+  const [isImageRemoved, setIsImageRemoved] = useState(false);
+
+  const handleNameChange = (value: string) => {
+    setName(value);
+
+    if (value.trim().length < 2) {
+      setErrorMessage("팀 이름은 2자 이상 입력해주세요.");
+      return;
+    }
+
+    setErrorMessage("");
+  };
+
+  const isValid = name.trim().length >= 2 && !errorMessage;
+
+  const handleRemoveImage = () => {
+    clear();
+    setIsImageRemoved(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!isValid) return;
+
+    try {
+      setIsSubmitting(true);
+
+      let imageUrl: string | null = null;
+      if (file) {
+        imageUrl = await uploadImage();
+      }
+
+      const body = {
+        name,
+        ...(imageUrl && { image: imageUrl }),
+        ...(isImageRemoved && !imageUrl && { image: null }),
+      };
+
+      await patchGroup({
+        param: { id: teamId },
+        body,
+      });
+
+      router.push(`/team/${teamId}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return {
+    name,
+    errorMessage,
+    preview,
+    isValid,
+    isSubmitting,
+    handleNameChange,
+    handleImageChange,
+    handleRemoveImage,
+    handleSubmit,
+  };
+};
+
+export default useTeamEdit;
diff --git a/src/app/(route)/team/[teamId]/edit/page.tsx b/src/app/(route)/team/[teamId]/edit/page.tsx
index 9f3ca8e0..68d1950d 100644
--- a/src/app/(route)/team/[teamId]/edit/page.tsx
+++ b/src/app/(route)/team/[teamId]/edit/page.tsx
@@ -1,5 +1,11 @@
 import { CenteredCardLayout } from "@/app/(route)/_components";
 import EditTeamForm from "./_components/EditTeamForm/EditTeamForm";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 팀 수정하기",
+  description: "팀 이름과 이미지를 수정해보세요.",
+};
 
 const TeamEditPage = () => {
   return (
diff --git a/src/app/(route)/team/[teamId]/page.tsx b/src/app/(route)/team/[teamId]/page.tsx
index ba9f9c2b..7b663707 100644
--- a/src/app/(route)/team/[teamId]/page.tsx
+++ b/src/app/(route)/team/[teamId]/page.tsx
@@ -1,5 +1,11 @@
 import { PageLayout } from "@/common";
 import { MemberWidget, ProgressWidget, TaskSection } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 팀 페이지",
+  description: "할 일들을 생성하고, 효율적인 업무 관리를 시작해보세요.",
+};
 
 const TeamDetailPage = async () => {
   return (
diff --git a/src/app/(route)/team/page.tsx b/src/app/(route)/team/page.tsx
index 7b609f49..335e4138 100644
--- a/src/app/(route)/team/page.tsx
+++ b/src/app/(route)/team/page.tsx
@@ -2,6 +2,12 @@ import ImgEmptyTeam from "@/assets/images/empty-team.png";
 import Image from "next/image";
 import { BaseButton, PageLayout } from "@/common";
 import Link from "next/link";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 팀 페이지",
+  description: "팀을 생성하거나 팀에 참여해보세요.",
+};
 
 const EmptyTeamPage = async () => {
   return (
diff --git a/src/app/dashboard/_components/Section/DashBoardAllArticles/DashBoardAllArticles.tsx b/src/app/dashboard/_components/Section/DashBoardAllArticles/DashBoardAllArticles.tsx
index c9176846..3670a2cb 100644
--- a/src/app/dashboard/_components/Section/DashBoardAllArticles/DashBoardAllArticles.tsx
+++ b/src/app/dashboard/_components/Section/DashBoardAllArticles/DashBoardAllArticles.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import { useGetArticles } from "@/api/hooks";
 import { Select } from "@/common";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import DefaultArticleCard from "../../../../(route)/dashboard/_components/Article/DefaultArticleCard";
 import { SelectOption } from "@/common/Select/_types/types";
 import { useArticleSearchStore } from "@/stores";
 import { useDebounce } from "@/hooks";
+import useGetArticlesInfinite from "@/api/hooks/article/useGetArticlesInfinite";
+import { LoadingSpinner } from "@/features";
+import { AnimatePresence, motion } from "framer-motion";
 
 const DashBoardAllArticles = () => {
   const [orderBy, setOrderBy] = useState<"recent" | "like">("recent");
@@ -18,7 +20,39 @@ const DashBoardAllArticles = () => {
     { label: "좋아요순", value: "like" },
   ];
 
-  const { data: articles } = useGetArticles({ orderBy, keyword: debouncedValue });
+  const {
+    data: articles,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+  } = useGetArticlesInfinite({
+    orderBy,
+    keyword: debouncedValue,
+    pageSize: 6,
+  });
+
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!observerRef.current || !hasNextPage) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      {
+        threshold: 0,
+        rootMargin: "0px",
+      },
+    );
+
+    observer.observe(observerRef.current);
+
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
   return (
     <div className="mt-10">
@@ -28,12 +62,27 @@ const DashBoardAllArticles = () => {
       </div>
 
       <ul className="mt-10 grid grid-cols-1 pc:grid-cols-2 gap-4">
-        {articles?.list.map((article) => (
-          <li key={article.id}>
-            <DefaultArticleCard articleId={article.id} />
-          </li>
-        ))}
+        <AnimatePresence>
+          {articles?.pages.map((page) =>
+            page.list.map((article) => (
+              <motion.li
+                key={article.id}
+                initial={{ opacity: 0, x: 0, y: 20 }}
+                whileInView={{ opacity: 1, x: 0, y: 0 }}
+                transition={{ duration: 0.7, delay: 0.2 }}
+                viewport={{ once: true, amount: 0.5 }}
+              >
+                <DefaultArticleCard articleId={article.id} />
+              </motion.li>
+            )),
+          )}
+        </AnimatePresence>
+
+        {isFetchingNextPage && <LoadingSpinner />}
       </ul>
+
+      <div ref={observerRef} className="h-10" />
+      {!hasNextPage && !isLoading && <p className="py-6 text-center text-state-400">더 이상 게시글이 없습니다.</p>}
     </div>
   );
 };
diff --git a/src/app/dashboard/_components/Section/DashBoardBestArticles/DashBoardBestArticles.tsx b/src/app/dashboard/_components/Section/DashBoardBestArticles/DashBoardBestArticles.tsx
index c746002d..cf65df41 100644
--- a/src/app/dashboard/_components/Section/DashBoardBestArticles/DashBoardBestArticles.tsx
+++ b/src/app/dashboard/_components/Section/DashBoardBestArticles/DashBoardBestArticles.tsx
@@ -23,9 +23,9 @@ const DashBoardBestArticles = () => {
     <section className="gap-5 -mx-[26px] px-1 pc:-mx-0 pc:px-8 py-10 mt-10 bg-background-secondary pc:rounded-[20px]">
       <div className="px-[26px] pc:px-8">
         <h3 className="text-text-primary text-xl-bold mb-4">베스트 게시글</h3>
-        <ul className="flex gap-4">
+        <ul className="grid grid-cols-1 tablet:grid-cols-2 pc:grid-cols-3 gap-4 items-stretch">
           {articles?.list.map((article) => (
-            <li className="flex-1" key={article.id}>
+            <li className="h-full" key={article.id}>
               <BestArticleCard articleId={article.id} />
             </li>
           ))}
diff --git a/src/app/dashboard/_components/Section/DashBoardBestArticles/_internal/Pagination.tsx b/src/app/dashboard/_components/Section/DashBoardBestArticles/_internal/Pagination.tsx
index ecf37808..744efde9 100644
--- a/src/app/dashboard/_components/Section/DashBoardBestArticles/_internal/Pagination.tsx
+++ b/src/app/dashboard/_components/Section/DashBoardBestArticles/_internal/Pagination.tsx
@@ -10,8 +10,8 @@ interface PaginationProps {
 }
 
 const Pagination = ({ page, totalPages, onPrev, onNext, maxDots = 5 }: PaginationProps) => {
-  const startPage = Math.max(1, page - Math.floor(maxDots / 2));
-  const endPage = Math.min(totalPages, startPage + maxDots - 1);
+  const startPage = Math.floor((page - 1) / maxDots) * maxDots + 1;
+  const endPage = Math.min(startPage + maxDots - 1, totalPages);
 
   const visiblePages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
 
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index ac8188a4..f49def29 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,6 +1,12 @@
 import Link from "next/link";
 import { FloatingButton, PageLayout } from "@/common";
 import { DashBoardHeader, DashBoardBestArticles, DashBoardAllArticles } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Coworkers | 자유게시판",
+  description: "게시글을 통해 팀원들과 소통해보세요.",
+};
 
 const DashboardPage = () => {
   return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b737ca49..1fdfba09 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,6 +33,7 @@ export default function RootLayout({
           <main className="flex-1 min-w-0 bg-background-secondary">{children}</main>
           <ToasterContainer />
         </QueryProviders>
+        <div id="portal-root" />
       </body>
     </html>
   );
diff --git a/src/common/Dropdown/Dropdown.tsx b/src/common/Dropdown/Dropdown.tsx
index b3101254..3c30b1c7 100644
--- a/src/common/Dropdown/Dropdown.tsx
+++ b/src/common/Dropdown/Dropdown.tsx
@@ -5,32 +5,14 @@ import { MouseEvent, ReactNode, useRef, useState } from "react";
 import { cn } from "@/utils";
 import Icon, { IconKeys } from "../Icon/Icon";
 import { DropdownOption } from "./_types/types";
+import Portal from "../Portal/Portal";
+import { DropdownPlacement, getPositionByPlacement } from "@/utils/getPositionByPlacement";
 
-/**
- * @author sangin
- *
- * @example
- * ```tsx
- * const options = [
- *   { label: "마이 히스토리", action: ()=>{} },
- *   { label: "로그아웃", action: ()=>{} },
- * ];
- *
- * <Dropdown
- *   iconName={kebab}
- *   options={options}
- *   iconClassName="tablet:size-9 text-red-200"
- * />
- * ```
- */
-
-type DropdownPlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
-
-const PLACEMENT_BY_STYLE = {
-  "bottom-left": "left-0 top-full",
-  "bottom-right": "right-0 top-full",
-  "top-left": "left-0 bottom-full",
-  "top-right": "right-0 bottom-full",
+const PLACEMENT_TRANSFORM: Record<DropdownPlacement, string> = {
+  "bottom-left": "translate-x-0 translate-y-0",
+  "top-left": "translate-x-0 -translate-y-full",
+  "bottom-right": "-translate-x-full translate-y-0",
+  "top-right": "-translate-x-full -translate-y-full",
 };
 
 interface DropdownProps {
@@ -51,12 +33,19 @@ const Dropdown = ({
   placement = "bottom-left",
 }: DropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
 
-  const placementStyle = PLACEMENT_BY_STYLE[placement];
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const dropdownRef = useRef<HTMLUListElement | null>(null);
 
   const handleDropdownClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    if (!triggerRef.current) return;
+
+    const rect = triggerRef.current.getBoundingClientRect();
+    const pos = getPositionByPlacement(rect, placement);
+
+    setPosition(pos);
     setIsOpen((prev) => !prev);
   };
 
@@ -66,35 +55,41 @@ const Dropdown = ({
   };
 
   useDropdownClose(dropdownRef, () => setIsOpen(false), isOpen);
+
   return (
-    <div className="relative inline-block" ref={dropdownRef}>
-      <button aria-label="드롭다운 버튼" onClick={handleDropdownClick}>
-        <span>
-          {iconName ? <Icon aria-label="드롭다운 아이콘" name={iconName} className={iconClassName} /> : image}
-        </span>
+    <>
+      <button ref={triggerRef} aria-label="드롭다운 버튼" onClick={handleDropdownClick}>
+        {iconName ? <Icon name={iconName} className={iconClassName} /> : image}
       </button>
 
       {isOpen && (
-        <ul
-          className={cn(
-            "absolute mt-1 min-w-[120px] bg-background-primary border rounded-xl shadow-md z-10  overflow-hidden",
-            placementStyle,
-          )}
-        >
-          {options.map((option) => (
-            <li key={option.label}>
-              <button
-                aria-label="드롭다운 메뉴"
-                className={cn("w-full px-3 py-2 hover:bg-state-200 transition", `text-${textAlign}`)}
-                onClick={() => handleOptionClick(option)}
-              >
-                <span className="text-md-regular text-text-primary">{option.label}</span>
-              </button>
-            </li>
-          ))}
-        </ul>
+        <Portal>
+          <ul
+            ref={dropdownRef}
+            style={{
+              position: "absolute",
+              top: position.top,
+              left: position.left,
+            }}
+            className={cn(
+              "min-w-[120px] bg-background-primary border rounded-xl shadow-md",
+              PLACEMENT_TRANSFORM[placement],
+            )}
+          >
+            {options.map((option) => (
+              <li key={option.label}>
+                <button
+                  className={cn("w-full px-3 py-2 hover:bg-state-200 transition", `text-${textAlign}`)}
+                  onClick={() => handleOptionClick(option)}
+                >
+                  <span className="text-md-regular text-text-primary">{option.label}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </Portal>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/src/common/Modal/Modal.tsx b/src/common/Modal/Modal.tsx
index ec90615d..96391636 100644
--- a/src/common/Modal/Modal.tsx
+++ b/src/common/Modal/Modal.tsx
@@ -11,6 +11,7 @@ import {
 } from "./MODAL_STYLE";
 import Icon from "../Icon/Icon";
 import { ModalProps, ModalContentProps } from "./_types/ModalProps";
+import Portal from "../Portal/Portal";
 
 /**
  * @author sangin
@@ -34,9 +35,11 @@ const Modal = ({ isOpen, onClose, className, children }: ModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className={MODAL_OVERLAY_STYLE} onClick={handleOverlayClick}>
-      <div className={cn(MODAL_BASE_STYLE, className)}>{children}</div>
-    </div>
+    <Portal>
+      <div className={MODAL_OVERLAY_STYLE} onClick={handleOverlayClick}>
+        <div className={cn(MODAL_BASE_STYLE, className)}>{children}</div>
+      </div>
+    </Portal>
   );
 };
 
diff --git a/src/common/Portal/Portal.tsx b/src/common/Portal/Portal.tsx
new file mode 100644
index 00000000..1eec64c6
--- /dev/null
+++ b/src/common/Portal/Portal.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { createPortal } from "react-dom";
+
+const Portal = ({ children }: { children: ReactNode }) => {
+  const [mounted] = useState(() => typeof window !== "undefined");
+
+  if (!mounted) return null;
+
+  const root = document.getElementById("portal-root");
+  if (!root) return null;
+
+  return createPortal(children, root);
+};
+
+export default Portal;
diff --git a/src/common/Select/Select.tsx b/src/common/Select/Select.tsx
index 47778b84..b1bcab10 100644
--- a/src/common/Select/Select.tsx
+++ b/src/common/Select/Select.tsx
@@ -67,7 +67,7 @@ const Select = <T,>({ value, options, onChange, className, textAlign = "left" }:
       </button>
 
       {isOpen && (
-        <ul className="absolute left-0 top-full mt-1 w-full bg-background-primary border rounded-xl shadow-md z-10 overflow-hidden">
+        <ul className="absolute left-0 top-full mt-1 w-full bg-background-primary border rounded-xl shadow-md">
           {options.map((option) => (
             <li key={option.label}>
               <button
diff --git a/src/common/index.ts b/src/common/index.ts
index 68078cbf..8c019fd8 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -24,3 +24,4 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar";
 export { default as ProgressBadge } from "./ProgressBadge/ProgressBadge";
 export { default as InputPassword } from "./Input/InputPassword/InputPassword";
 export { default as LinkButton } from "./asProp/LinkButton/LinkButton";
+export { default as Portal } from "./Portal/Portal";
diff --git a/src/hooks/useImageUpload.ts b/src/hooks/useImageUpload.ts
index 77d852e7..a358a118 100644
--- a/src/hooks/useImageUpload.ts
+++ b/src/hooks/useImageUpload.ts
@@ -10,6 +10,7 @@ interface UsePostImageUploadReturn {
   uploadImage: () => Promise<string | null>;
   isUploading: boolean;
   reset: () => void;
+  clear: () => void;
 }
 
 const useImageUpload = (initialImage?: string): UsePostImageUploadReturn => {
@@ -34,6 +35,14 @@ const useImageUpload = (initialImage?: string): UsePostImageUploadReturn => {
     setPreview(initialImage || "");
   };
 
+  const clear = () => {
+    if (preview && !preview.startsWith("http")) {
+      URL.revokeObjectURL(preview);
+    }
+    setFile(null);
+    setPreview("");
+  };
+
   useEffect(() => {
     return () => {
       if (preview && !preview.startsWith("http")) {
@@ -69,6 +78,7 @@ const useImageUpload = (initialImage?: string): UsePostImageUploadReturn => {
     uploadImage,
     isUploading: uploadMutation.isPending,
     reset,
+    clear,
   };
 };
 
diff --git a/src/utils/getPositionByPlacement.ts b/src/utils/getPositionByPlacement.ts
new file mode 100644
index 00000000..95777fae
--- /dev/null
+++ b/src/utils/getPositionByPlacement.ts
@@ -0,0 +1,17 @@
+export type DropdownPlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+
+export const getPositionByPlacement = (rect: DOMRect, placement: DropdownPlacement) => {
+  const x = window.scrollX;
+  const y = window.scrollY;
+
+  switch (placement) {
+    case "bottom-left":
+      return { top: rect.bottom + y, left: rect.left + x };
+    case "bottom-right":
+      return { top: rect.bottom + y, left: rect.right + x };
+    case "top-left":
+      return { top: rect.top + y, left: rect.left + x };
+    case "top-right":
+      return { top: rect.top + y, left: rect.right + x };
+  }
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 39b33160..2e7d7382 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -10,3 +10,4 @@ export { setAuthCookies } from "@/utils/setAuthCookies";
 export { toastKit } from "@/utils/toastKit";
 export { default as getTaskStatus } from "./getTaskStatus";
 export { default as getTaskListStatus } from "./getTaskListStatus";
+export { getPositionByPlacement } from "./getPositionByPlacement";