diff --git a/.eslintrc.json b/.eslintrc.json
index b07d60f..b9be207 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,6 +2,7 @@
   "extends": ["next/core-web-vitals", "next/typescript"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "warn"
   }
 }
diff --git a/app/api/posts/[slug]/route.ts b/app/api/posts/[slug]/route.ts
index d9cc02f..92f3faa 100644
--- a/app/api/posts/[slug]/route.ts
+++ b/app/api/posts/[slug]/route.ts
@@ -1,8 +1,9 @@
 // app/api/posts/[slug]/route.ts
 import dbConnect from '@/app/lib/dbConnect';
 import Post from '@/app/models/Post';
-import { NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { getThumbnailInMarkdown } from '@/app/lib/utils/parse';
+import Series from '@/app/models/Series';
 
 export async function GET(
   req: NextRequest,
@@ -36,6 +37,7 @@ export async function PUT(
   try {
     await dbConnect();
     const body = await req.json();
+    const post = await Post.findOne({ slug: params.slug });
 
     const updatedPost = await Post.findOneAndUpdate(
       { slug: params.slug },
@@ -53,6 +55,23 @@ export async function PUT(
       );
     }
 
+    // 시리즈 변경 처리
+    if (post.seriesId?.toString() !== body.seriesId) {
+      if (post.seriesId) {
+        await Series.findByIdAndUpdate(post.seriesId, {
+          $pull: { posts: post._id },
+          $inc: { postCount: -1 },
+        });
+      }
+
+      if (body.seriesId) {
+        await Series.findByIdAndUpdate(body.seriesId, {
+          $push: { posts: post._id },
+          $inc: { postCount: 1 },
+        });
+      }
+    }
+
     return Response.json({ success: true, post: updatedPost });
   } catch (error) {
     console.error(error);
@@ -64,28 +83,35 @@ export async function PUT(
 }
 
 export async function DELETE(
-  req: NextRequest,
+  request: Request,
   { params }: { params: { slug: string } }
 ) {
   try {
     await dbConnect();
-    const deletedPost = await Post.findByIdAndDelete(params.slug).lean();
+    const post = await Post.findById(params.slug);
 
-    if (!deletedPost) {
-      return Response.json(
-        { success: false, error: '삭제할 글을 찾을 수 없습니다.' },
+    if (!post) {
+      return NextResponse.json(
+        { error: '삭제할 포스트를 찾을 수 없습니다.' },
         { status: 404 }
       );
     }
 
-    return Response.json({
-      success: true,
-      message: '글이 삭제되었습니다.',
+    if (post.seriesId) {
+      await Series.findByIdAndUpdate(post.seriesId, {
+        $pull: { posts: post._id },
+        $inc: { postCount: -1 },
+      });
+    }
+
+    await Post.deleteOne({ _id: params.slug });
+
+    return NextResponse.json({
+      message: '포스트가 성공적으로 삭제되었습니다.',
     });
-  } catch (error) {
-    console.error(error);
-    return Response.json(
-      { success: false, error: 'Server Error' },
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '포스트 삭제에 실패했습니다.' },
       { status: 500 }
     );
   }
diff --git a/app/api/posts/route.ts b/app/api/posts/route.ts
index c004279..0ac0418 100644
--- a/app/api/posts/route.ts
+++ b/app/api/posts/route.ts
@@ -3,6 +3,8 @@ import dbConnect from '@/app/lib/dbConnect';
 import { getServerSession } from 'next-auth/next';
 import { getThumbnailInMarkdown } from '@/app/lib/utils/parse';
 import { generateUniqueSlug } from '@/app/lib/utils/post';
+import Series from '@/app/models/Series';
+import { QuerySelector } from 'mongoose';
 
 // GET /api/posts - 모든 글 조회
 export async function GET(req: Request) {
@@ -11,6 +13,11 @@ export async function GET(req: Request) {
     const { searchParams } = new URL(req.url);
 
     const query = searchParams.get('query') || '';
+    const seriesSlug = searchParams.get('series') || '';
+
+    const seriesId = seriesSlug
+      ? await Series.findOne({ slug: seriesSlug }, '_id')
+      : null;
 
     // 검색 조건 구성
     const searchConditions = {
@@ -19,9 +26,17 @@ export async function GET(req: Request) {
         { content: { $regex: query, $options: 'i' } },
         { subTitle: { $regex: query, $options: 'i' } },
       ],
+      $and: [],
     };
 
+    if (seriesId) {
+      (searchConditions.$and as QuerySelector<string>[]).push({
+        seriesId: seriesId,
+      } as QuerySelector<string>);
+    }
+
     const posts = await Post.find(searchConditions)
+
       .sort({ date: -1 })
       .limit(10);
 
@@ -45,8 +60,15 @@ export async function POST(req: Request) {
     }
 
     await dbConnect();
-    const { title, subTitle, author, content, profileImage, thumbnailImage } =
-      await req.json();
+    const {
+      title,
+      subTitle,
+      author,
+      content,
+      profileImage,
+      thumbnailImage,
+      seriesId,
+    } = await req.json();
 
     if (!title || !content || !author || !content) {
       return Response.json(
@@ -64,6 +86,7 @@ export async function POST(req: Request) {
       timeToRead: Math.ceil(content.length / 500),
       profileImage,
       thumbnailImage: thumbnailImage || getThumbnailInMarkdown(content),
+      seriesId: seriesId || null,
     };
 
     const newPost = await Post.create(post);
@@ -74,6 +97,13 @@ export async function POST(req: Request) {
       );
     }
 
+    if (post.seriesId) {
+      await Series.findByIdAndUpdate(post.seriesId, {
+        $push: { posts: newPost._id },
+        $inc: { postCount: 1 }, // postCount 1 증가
+      });
+    }
+
     return Response.json(
       {
         success: true,
diff --git a/app/api/series/[slug]/route.ts b/app/api/series/[slug]/route.ts
new file mode 100644
index 0000000..6035643
--- /dev/null
+++ b/app/api/series/[slug]/route.ts
@@ -0,0 +1,91 @@
+import { NextResponse } from 'next/server';
+import dbConnect from '@/app/lib/dbConnect';
+import Series from '@/app/models/Series';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  try {
+    await dbConnect();
+    const series = await Series.findOne({ slug: params.slug }).populate(
+      'posts'
+    );
+
+    if (!series) {
+      return NextResponse.json(
+        { error: '해당 시리즈를 찾을 수 없습니다.' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(series);
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '시리즈 조회에 실패했습니다.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  try {
+    await dbConnect();
+    const body = await request.json();
+
+    const updatedSeries = await Series.findOneAndUpdate(
+      { slug: params.slug },
+      {
+        title: body.title,
+        description: body.description,
+        thumbnailImage: body.thumbnailImage,
+        order: body.order,
+        posts: body.posts,
+      },
+      { new: true }
+    ).populate('posts');
+
+    if (!updatedSeries) {
+      return NextResponse.json(
+        { error: '수정할 시리즈를 찾을 수 없습니다.' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(updatedSeries);
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '시리즈 수정에 실패했습니다.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: { slug: string } }
+) {
+  try {
+    await dbConnect();
+    const deletedSeries = await Series.findOneAndDelete({ slug: params.slug });
+
+    if (!deletedSeries) {
+      return NextResponse.json(
+        { error: '삭제할 시리즈를 찾을 수 없습니다.' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json({
+      message: '시리즈가 성공적으로 삭제되었습니다.',
+    });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '시리즈 삭제에 실패했습니다.' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/series/route.ts b/app/api/series/route.ts
new file mode 100644
index 0000000..f668200
--- /dev/null
+++ b/app/api/series/route.ts
@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import dbConnect from '@/app/lib/dbConnect';
+import Series from '@/app/models/Series';
+import { createPostSlug } from '@/app/lib/utils/post';
+
+export async function POST(request: Request) {
+  try {
+    await dbConnect();
+    const body = await request.json();
+    if (!body.title) {
+      return NextResponse.json(
+        { error: '시리즈 제목을 입력해주세요.' },
+        { status: 400 }
+      );
+    }
+
+    const series = await Series.create({
+      slug: createPostSlug(body.title),
+      title: body.title,
+      description: body.description,
+      thumbnailImage: body.thumbnailImage || '',
+      order: body.order || [],
+      posts: body.posts || [],
+    });
+
+    return NextResponse.json(series, { status: 201 });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '시리즈 생성에 실패했습니다.' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(request: Request) {
+  try {
+    await dbConnect();
+    const { searchParams } = new URL(request.url);
+    const populate = searchParams.get('populate') === 'true';
+
+    const query = Series.find({});
+    if (populate) {
+      query.populate('posts');
+    }
+
+    const series = await query;
+    return NextResponse.json(series);
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || '시리즈 목록을 불러오는데 실패했습니다.' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/entities/common/Loading/SVGLoadingSpinner.tsx b/app/entities/common/Loading/SVGLoadingSpinner.tsx
new file mode 100644
index 0000000..292fb45
--- /dev/null
+++ b/app/entities/common/Loading/SVGLoadingSpinner.tsx
@@ -0,0 +1,19 @@
+import { ImSpinner2 } from 'react-icons/im';
+
+interface SVGLoadingSpinnerProps {
+  message?: string;
+}
+const SVGLoadingSpinner = ({ message }: SVGLoadingSpinnerProps) => {
+  return (
+    <div
+      className={
+        'flex justify-center items-center gap-2 mx-auto col-span-3 w-1/3 h-full pt-20'
+      }
+    >
+      <ImSpinner2 className={'text-3xl animate-spin'} />
+      {message && <span> {message}</span>}
+    </div>
+  );
+};
+
+export default SVGLoadingSpinner;
diff --git a/app/entities/common/NavBar.tsx b/app/entities/common/NavBar.tsx
index 62815e2..41dcae8 100644
--- a/app/entities/common/NavBar.tsx
+++ b/app/entities/common/NavBar.tsx
@@ -36,11 +36,14 @@ const NavBar = () => {
             <Profile profileThumbnail={profile} username={'Jeongwoo Seo'} />
           </Link>
         </div>
-        <ul className={'inline-flex max-w-5xl w-full justify-end gap-3 '}>
-          <li className={'px-4 py-2'}>
+        <ul className={'inline-flex max-w-5xl w-full justify-end gap-6 '}>
+          <li>
             <Link href="/posts">Blog</Link>
           </li>
-          <li className={'px-4 py-2'}>
+          <li>
+            <Link href="/series">Series</Link>
+          </li>
+          <li>
             <Link href="/portfolio">Portfolio</Link>
           </li>
         </ul>
diff --git a/app/entities/common/Overlay/Overlay.tsx b/app/entities/common/Overlay/Overlay.tsx
index 2bce718..038f794 100644
--- a/app/entities/common/Overlay/Overlay.tsx
+++ b/app/entities/common/Overlay/Overlay.tsx
@@ -1,10 +1,15 @@
 import { ReactNode, useEffect, useRef } from 'react';
 
 interface OverlayProps {
+  overlayOpen: boolean;
   setOverlayOpen: (open: boolean) => void;
   children: ReactNode;
 }
-const Overlay = ({ setOverlayOpen, children }: OverlayProps) => {
+const Overlay = ({
+  overlayOpen = false,
+  setOverlayOpen,
+  children,
+}: OverlayProps) => {
   const overlayRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -20,11 +25,16 @@ const Overlay = ({ setOverlayOpen, children }: OverlayProps) => {
   }, []);
 
   return (
-    <div ref={overlayRef} className="fixed inset-0 bg-black bg-opacity-50 z-50">
-      <div className="animate-popUp  container bg-overlay bg-opacity-90 text-overlay rounded-lg mx-auto mt-[24%] max-w-2xl">
-        {children}
+    overlayOpen && (
+      <div
+        ref={overlayRef}
+        className="fixed inset-0 bg-black bg-opacity-50 z-50"
+      >
+        <div className="animate-popUp  container bg-overlay bg-opacity-90 text-overlay rounded-lg mx-auto mt-[24%] max-w-2xl">
+          {children}
+        </div>
       </div>
-    </div>
+    )
   );
 };
 
diff --git a/app/entities/common/Select.tsx b/app/entities/common/Select.tsx
new file mode 100644
index 0000000..aa596f7
--- /dev/null
+++ b/app/entities/common/Select.tsx
@@ -0,0 +1,29 @@
+interface SelectOption<T> {
+  value: T;
+  label: string;
+}
+interface SelectProps<T> {
+  options: SelectOption<T>[];
+  defaultValue: T;
+  setValue: (value: T) => void;
+}
+const Select = <T extends string>({
+  options,
+  defaultValue,
+  setValue,
+}: SelectProps<T>) => {
+  return (
+    <select
+      className="w-full p-2 border text-overlay border-gray-300 rounded-md"
+      defaultValue={defaultValue}
+      onChange={(e) => setValue(e.target.value as T)}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+export default Select;
diff --git a/app/entities/post/detail/PostHeader.tsx b/app/entities/post/detail/PostHeader.tsx
index ee3c4d6..2c0e157 100644
--- a/app/entities/post/detail/PostHeader.tsx
+++ b/app/entities/post/detail/PostHeader.tsx
@@ -50,7 +50,7 @@ const PostHeader = ({
         'post-header h-[220px] md:h-[292px] relative overflow-hidden w-full text-center bg-gray-400/50'
       }
     >
-      <h1 className={'font-bold mb-4 pt-10 md:pt-20 text-3xl lg:text-5xl '}>
+      <h1 className={'font-bold mb-4 pt-10 md:pt-20 text-3xl md:text-5xl '}>
         {displayTitle}
         {!isTypingComplete && (
           <span className="inline-block w-1 h-6 ml-1 bg-black animate-blink" />
diff --git a/app/entities/post/list/PostList.tsx b/app/entities/post/list/PostList.tsx
index 1b9635f..bdc2784 100644
--- a/app/entities/post/list/PostList.tsx
+++ b/app/entities/post/list/PostList.tsx
@@ -1,29 +1,28 @@
 import { Post } from '@/app/types/Post';
-import LoadingIndicator from '@/app/entities/common/Loading/LoadingIndicator';
 import PostPreview from '@/app/entities/post/list/PostPreview';
 import profile from '@/app/public/profile.jpg';
 import NotFound from '@/app/entities/common/Animation/NotFound';
+import SVGLoadingSpinner from '@/app/entities/common/Loading/SVGLoadingSpinner';
 
 const PostList = (props: {
   query: string;
   loading: boolean;
   posts: Post[] | undefined;
+  resetSearchCondition: () => void;
 }) => {
   return (
     <ul
       className={
-        'max-w-6xl mx-auto post-list my-12 px-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-6'
+        'h-fit max-w-6xl mx-auto post-list my-4 px-4 grid grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-6'
       }
     >
       {props.loading ? (
-        <div className={'mx-auto col-span-3 w-1/3 h-full pt-20'}>
-          <LoadingIndicator message={'발행된 글을 로딩 중입니다..'} />
-        </div>
+        <SVGLoadingSpinner message={'발행된 글을 불러오는 중...'} />
       ) : props.posts && props.posts.length > 0 ? (
         props.posts.map(
           (post) =>
             post._id && (
-              <li key={post._id}>
+              <li className={'block'} key={post._id}>
                 <PostPreview
                   _id={post._id}
                   slug={post.slug}
@@ -39,10 +38,16 @@ const PostList = (props: {
             )
         )
       ) : (
-        <div className={'col-span-3'}>
+        <div className={'flex flex-col gap-4 col-span-3'}>
           <NotFound
             message={`${props.query || '검색어'}에 대한 검색 결과가 없습니다.`}
           />
+          <button
+            onClick={props.resetSearchCondition}
+            className={'bg-black hover:bg-gray-600 px-4 py-1 rounded mx-auto'}
+          >
+            검색 초기화하기
+          </button>
         </div>
       )}
     </ul>
diff --git a/app/entities/post/list/PostPreview.tsx b/app/entities/post/list/PostPreview.tsx
index 0c5ae86..49b6d5d 100644
--- a/app/entities/post/list/PostPreview.tsx
+++ b/app/entities/post/list/PostPreview.tsx
@@ -21,15 +21,15 @@ const PostPreview = ({
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <Link href={`/posts/${slug}`} className={' mx-auto '}>
+    <Link href={`/posts/${slug}`} className={'mx-auto h-[400px]'}>
       <div
         className={
-          'w-full post-preview p-5 pb-8 bg-gray-100 text-black rounded-md transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-gray-200/50'
+          'w-full post-preview p-px  bg-gray-100 text-black rounded-md transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-gray-200/50 overflow-hidden'
         }
       >
         <div
           className={
-            'image-container overflow-hidden h-2/3 flex justify-center relative '
+            'image-container rounded-t-md overflow-hidden h-2/3 flex justify-center relative '
           }
         >
           {isLoading && (
@@ -49,10 +49,12 @@ const PostPreview = ({
             onLoad={() => setIsLoading(false)}
           />
         </div>
-        <div className={'h-1/3 flex flex-col gap-4 py-5 p-2'}>
-          <h2 className={'font-bold text-2xl'}>{title}</h2>
-          <p>{subTitle ? subTitle.slice(0, 80) + '...' : ''}</p>
-          <div className={'inline-flex justify-between w-full'}>
+        <div className={'h-1/3 flex flex-col justify-between gap-4 p-4'}>
+          <div>
+            <h2 className={'font-bold text-xl'}>{title}</h2>
+            <p>{subTitle ? subTitle.slice(0, 80) + '...' : ''}</p>
+          </div>
+          <div className={'inline-flex items-center justify-between w-full'}>
             <Profile profileThumbnail={profileImage} username={author} />
             <Timestamp date={date} />
           </div>
diff --git a/app/entities/post/list/SearchSection.tsx b/app/entities/post/list/SearchSection.tsx
index e7bb38b..a7ca5a5 100644
--- a/app/entities/post/list/SearchSection.tsx
+++ b/app/entities/post/list/SearchSection.tsx
@@ -1,22 +1,41 @@
 'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FaBook, FaSearch } from 'react-icons/fa';
-import { BiChevronDown } from 'react-icons/bi';
+import { BiChevronDown, BiReset } from 'react-icons/bi';
 import Overlay from '@/app/entities/common/Overlay/Overlay';
-import SeriesDropdownItem from '@/app/entities/post/series/SeriesDropdownItem';
-import Tag from '@/app/entities/common/Tag';
+import SeriesDropdownItem from '@/app/entities/series/SeriesDropdownItem';
 import SearchOverlayContainer from '@/app/entities/common/Overlay/Search/SearchOverlayContainer';
 import useSearchQueryStore from '@/app/stores/useSearchQueryStore';
+import { getAllSeriesData } from '@/app/entities/series/api/series';
+import { Series } from '@/app/types/Series';
+import { LuTimerReset } from 'react-icons/lu';
+import { MdLockReset } from 'react-icons/md';
+import { RiResetRightLine } from 'react-icons/ri';
 
 interface SearchSectionProps {
   query: string;
   setQuery: (query: string) => void;
+  resetSearchCondition: () => void;
 }
 
-const SearchSection = ({ query, setQuery }: SearchSectionProps) => {
+const SearchSection = ({
+  query,
+  setQuery,
+  resetSearchCondition,
+}: SearchSectionProps) => {
   const [searchOpen, setSearchOpen] = useState(false);
   const [seriesOpen, setSeriesOpen] = useState(false);
   const latest = useSearchQueryStore((state) => state.latestSearchQueries);
+  const [series, setSeries] = useState<Series[] | null>([]);
+
+  const getSeries = async () => {
+    const data = await getAllSeriesData();
+    setSeries(data);
+  };
+
+  useEffect(() => {
+    getSeries();
+  }, []);
 
   return (
     <div className="w-full max-w-6xl mx-auto">
@@ -40,16 +59,18 @@ const SearchSection = ({ query, setQuery }: SearchSectionProps) => {
             {seriesOpen && (
               <div className="bg-overlay absolute left-0 mt-2 w-64 z-50 text-overlay">
                 <div className="py-2">
-                  <SeriesDropdownItem
-                    setSeriesOpen={setSeriesOpen}
-                    seriesTitle={'Next.js 최적화'}
-                    seriesCount={3}
-                  />
-                  <SeriesDropdownItem
-                    setSeriesOpen={setSeriesOpen}
-                    seriesTitle={'블로그 개발기'}
-                    seriesCount={5}
-                  />
+                  {series?.map((s) => (
+                    <SeriesDropdownItem
+                      key={s.slug}
+                      setSeriesOpen={setSeriesOpen}
+                      seriesSlug={s.slug}
+                      seriesTitle={s.title}
+                      seriesCount={s.posts.length || 0}
+                    />
+                  ))}
+                  {series?.length === 0 && (
+                    <div className={'p-2'}>시리즈가 없습니다.</div>
+                  )}
                 </div>
               </div>
             )}
@@ -57,25 +78,29 @@ const SearchSection = ({ query, setQuery }: SearchSectionProps) => {
         </div>
 
         {/* 검색 버튼 및 검색창 */}
-        <div className="relative">
+        <div className={'flex items-center'}>
+          <button
+            onClick={resetSearchCondition}
+            className="p-2 hover:bg-gray-100 hover:text-black rounded-full transition-colors"
+          >
+            <RiResetRightLine size={20} />
+          </button>
           <button
             onClick={() => setSearchOpen(!searchOpen)}
-            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+            className="p-2 hover:bg-gray-100 hover:text-black rounded-full transition-colors"
           >
             <FaSearch size={20} />
           </button>
 
           {/* 검색 오버레이 */}
-          {searchOpen && (
-            <Overlay setOverlayOpen={setSearchOpen}>
-              <SearchOverlayContainer
-                setQuery={setQuery}
-                value={query}
-                onCancel={() => setSearchOpen(false)}
-                tags={latest || []}
-              />
-            </Overlay>
-          )}
+          <Overlay overlayOpen={searchOpen} setOverlayOpen={setSearchOpen}>
+            <SearchOverlayContainer
+              setQuery={setQuery}
+              value={query}
+              onCancel={() => setSearchOpen(false)}
+              tags={latest || []}
+            />
+          </Overlay>
         </div>
       </nav>
     </div>
diff --git a/app/entities/post/write/BlogForm.tsx b/app/entities/post/write/BlogForm.tsx
index 0907920..715a764 100644
--- a/app/entities/post/write/BlogForm.tsx
+++ b/app/entities/post/write/BlogForm.tsx
@@ -1,16 +1,23 @@
 'use client';
 import '@uiw/react-md-editor/markdown-editor.css';
 import '@uiw/react-markdown-preview/markdown.css';
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
-import Link from 'next/link';
 import { PostBody } from '@/app/types/Post';
 import { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import LoadingSpinner from '@/app/entities/common/Loading/LoadingSpinner';
 import axios from 'axios';
 import useToast from '@/app/hooks/useToast';
 import { useBlockNavigate } from '@/app/hooks/useBlockNavigate';
 import { useRouter, useSearchParams } from 'next/navigation';
+import PostWriteButtons from '@/app/entities/post/write/PostWriteButtons';
+import { validatePost } from '@/app/lib/utils/validate/validate';
+import Select from '@/app/entities/common/Select';
+import { Series } from '@/app/types/Series';
+import Overlay from '@/app/entities/common/Overlay/Overlay';
+import { FaPlus } from 'react-icons/fa6';
+import CreateSeriesOverlayContainer from '@/app/entities/series/CreateSeriesOverlayContainer';
+import { getAllSeriesData } from '@/app/entities/series/api/series';
+import LoadingIndicator from '@/app/entities/common/Loading/LoadingIndicator';
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
 
@@ -23,14 +30,21 @@ const BlogForm = () => {
   const [content, setContent] = useState<string | undefined>('');
   const [profileImage, setProfileImage] = useState<string | StaticImport>();
   const [thumbnailImage, setThumbnailImage] = useState<string | StaticImport>();
+  const [seriesList, setSeriesList] = useState<Series[]>([]);
+  const [seriesId, setSeriesId] = useState<string>();
+  const [seriesLoading, setSeriesLoading] = useState(true);
   const [errors, setErrors] = useState<string[]>([]);
   const toast = useToast();
   const router = useRouter();
-  const buttonStyle = `font-bold py-2 px-4 rounded mr-2 disabled:bg-opacity-75 `;
   const NICKNAME = '개발자 서정우';
+  const [createSeriesOpen, setCreateSeriesOpen] = useState(false);
 
   useBlockNavigate({ title, content: content || '' });
 
+  useEffect(() => {
+    getSeries();
+  }, []);
+
   useEffect(() => {
     if (slug) {
       getPostDetail();
@@ -44,8 +58,22 @@ const BlogForm = () => {
     content: content || '',
     profileImage,
     thumbnailImage,
+    seriesId: seriesId || '',
   };
 
+  // 시리즈
+  const getSeries = async () => {
+    try {
+      const data = await getAllSeriesData();
+      setSeriesList(data);
+      setSeriesId(data[0]._id);
+      setSeriesLoading(false);
+    } catch (e) {
+      console.error('시리즈 조회 중 오류 발생', e);
+    }
+  };
+
+  // 블로그
   const postBlog = async (post: PostBody) => {
     try {
       const response = await axios.post('/api/posts', post);
@@ -72,50 +100,11 @@ const BlogForm = () => {
     }
   };
 
-  const validatePost = (
-    post: PostBody
-  ): { isValid: boolean; errors: string[] } => {
-    const errors: string[] = [];
-
-    // 필수 필드 검사
-    if (!post.title?.trim()) {
-      errors.push('제목은 필수입니다');
-    }
-    if (!post.content?.trim()) {
-      errors.push('내용은 필수입니다');
-    }
-
-    // 길이 제한 검사
-    if (post.title && post.title.length > 100) {
-      errors.push('제목은 100자를 초과할 수 없습니다');
-    }
-    if (post.subTitle && post.subTitle.length > 200) {
-      errors.push('부제목은 200자를 초과할 수 없습니다');
-    }
-    if (post.content && post.content.length > 50000) {
-      errors.push('내용은 20000자를 초과할 수 없습니다');
-    }
-
-    // 최소 길이 검사
-    if (post.title && post.title.length < 2) {
-      errors.push('제목은 최소 2자 이상이어야 합니다');
-    }
-
-    if (post.content && post.content.length < 10) {
-      errors.push('내용은 최소 10자 이상이어야 합니다');
-    }
-
-    setErrors(errors);
-    return {
-      isValid: errors.length === 0,
-      errors,
-    };
-  };
-
   const submitHandler = (post: PostBody) => {
     try {
       setSubmitLoading(true);
       const { isValid, errors } = validatePost(post);
+      setErrors(errors);
       if (!isValid) {
         toast.error('유효성 검사 실패');
         console.error('유효성 검사 실패', errors);
@@ -162,6 +151,42 @@ const BlogForm = () => {
         onChange={(e) => setSubTitle(e.target.value)}
         value={subTitle}
       />
+      <div className={'flex items-center gap-2  w-1/2 mb-4'}>
+        <label
+          className={'inline-flex items-center text-nowrap flex-grow gap-2'}
+        >
+          <span className={'font-bold'}>시리즈</span>
+          {seriesLoading ? (
+            <div>loading...</div>
+          ) : (
+            <Select
+              options={seriesList.map((s) => ({
+                value: s._id,
+                label: s.title,
+              }))}
+              setValue={setSeriesId}
+              defaultValue={seriesList[0] ? seriesList[0]._id : ''}
+            />
+          )}
+        </label>
+        <button
+          onClick={() => setCreateSeriesOpen(true)}
+          className={
+            'inline-flex items-center gap-2 bg-green-200 text-black p-2 px-4 rounded-md hover:bg-green-300'
+          }
+        >
+          새로운 시리즈 <FaPlus />
+        </button>
+      </div>
+      <Overlay
+        overlayOpen={createSeriesOpen}
+        setOverlayOpen={setCreateSeriesOpen}
+      >
+        <CreateSeriesOverlayContainer
+          setCreateSeriesOpen={setCreateSeriesOpen}
+        />
+      </Overlay>
+
       <MDEditor
         value={content}
         onChange={setContent}
@@ -177,27 +202,12 @@ const BlogForm = () => {
           ))}
         </div>
       )}
-      <div className={'w-full flex justify-center my-6'}>
-        <Link
-          href={'/admin'}
-          className={buttonStyle + ' text-black bg-gray-200 hover:bg-red-500 '}
-        >
-          <button>나가기</button>
-        </Link>
-        <button className={buttonStyle + 'bg-blue-500 hover:bg-blue-700 '}>
-          임시 저장
-        </button>
-        <button
-          disabled={submitLoading}
-          className={buttonStyle + 'bg-emerald-500  hover:bg-emerald-700 '}
-          onClick={(e) => {
-            e.preventDefault();
-            submitHandler(postBody);
-          }}
-        >
-          {submitLoading ? <LoadingSpinner /> : slug ? '글 수정' : '글 발행'}
-        </button>
-      </div>
+      <PostWriteButtons
+        slug={slug}
+        postBody={postBody}
+        submitHandler={submitHandler}
+        submitLoading={submitLoading}
+      />
     </div>
   );
 };
diff --git a/app/entities/post/write/PostWriteButtons.tsx b/app/entities/post/write/PostWriteButtons.tsx
new file mode 100644
index 0000000..f1d8432
--- /dev/null
+++ b/app/entities/post/write/PostWriteButtons.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import LoadingSpinner from '@/app/entities/common/Loading/LoadingSpinner';
+import { PostBody } from '@/app/types/Post';
+
+interface PostWriteButtonsProps {
+  slug: string | null;
+  postBody: PostBody;
+  submitLoading: boolean;
+  submitHandler: (postBody: PostBody) => void;
+}
+const PostWriteButtons = ({
+  slug,
+  submitLoading,
+  submitHandler,
+  postBody,
+}: PostWriteButtonsProps) => {
+  const buttonStyle = `font-bold py-2 px-4 rounded mr-2 disabled:bg-opacity-75 `;
+  return (
+    <div className={'w-full flex justify-center my-6'}>
+      <Link
+        href={'/admin'}
+        className={buttonStyle + ' text-black bg-gray-200 hover:bg-red-500 '}
+      >
+        <button>나가기</button>
+      </Link>
+      <button className={buttonStyle + 'bg-blue-500 hover:bg-blue-700 '}>
+        임시 저장
+      </button>
+      <button
+        disabled={submitLoading}
+        className={buttonStyle + 'bg-emerald-500  hover:bg-emerald-700 '}
+        onClick={(e) => {
+          e.preventDefault();
+          submitHandler(postBody);
+        }}
+      >
+        {submitLoading ? <LoadingSpinner /> : slug ? '글 수정' : '글 발행'}
+      </button>
+    </div>
+  );
+};
+
+export default PostWriteButtons;
diff --git a/app/entities/series/CreateSeriesOverlayContainer.tsx b/app/entities/series/CreateSeriesOverlayContainer.tsx
new file mode 100644
index 0000000..08a1493
--- /dev/null
+++ b/app/entities/series/CreateSeriesOverlayContainer.tsx
@@ -0,0 +1,87 @@
+import { ChangeEvent, useState } from 'react';
+import { createSeries } from '@/app/entities/series/api/series';
+import useToast from '@/app/hooks/useToast';
+
+interface CreateSeriesOverlayContainerProps {
+  setCreateSeriesOpen: (open: boolean) => void;
+}
+
+const CreateSeriesOverlayContainer = ({
+  setCreateSeriesOpen,
+}: CreateSeriesOverlayContainerProps) => {
+  const [seriesTitle, setSeriesTitle] = useState<string>('');
+  const [seriesDescription, setSeriesDescription] = useState<string>('');
+  const [seriesThumbnail, setSeriesThumbnail] = useState<string>('');
+  const toast = useToast();
+
+  const postSeries = async () => {
+    try {
+      const data = await createSeries({
+        title: seriesTitle,
+        description: seriesDescription,
+        thumbnailImage: seriesThumbnail,
+      });
+      if (data._id) {
+        toast.success('시리즈가 성공적으로 생성되었습니다.');
+      } else {
+        toast.error('시리즈 생성 중 오류가 발생했습니다.');
+      }
+    } catch (e) {
+      toast.error('시리즈 생성 중 오류가 발생했습니다.');
+      console.error('시리즈 생성 중 오류 발생', e);
+    } finally {
+      setCreateSeriesOpen(false);
+    }
+  };
+
+  return (
+    <div className={'p-5 flex flex-col gap-2 items-stretch justify-center'}>
+      <h2 className={'text-3xl font-bold text-center'}>새로운 시리즈 만들기</h2>
+      <p className={'text-center'}>
+        새로운 시리즈를 생성합니다. 제목은 필수로 작성해야합니다.
+      </p>
+      <label className={'inline-flex items-center text-nowrap flex-grow gap-2'}>
+        <span className={'font-bold w-24'}>시리즈 이름</span>
+        <input
+          type="text"
+          placeholder="시리즈의 이름"
+          className="flex-grow p-2 border border-gray-300 rounded text-black"
+          onChange={(e) => setSeriesTitle(e.target.value)}
+          value={seriesTitle || ''}
+        />
+      </label>
+      <label className={'inline-flex items-center text-nowrap flex-grow gap-2'}>
+        <span className={'font-bold w-24'}>시리즈 설명</span>
+        <textarea
+          placeholder="시리즈의 설명"
+          className="flex-grow p-2 border border-gray-300 rounded text-black"
+          onChange={(e) => setSeriesDescription(e.target.value)}
+          value={seriesDescription || ''}
+        />
+      </label>
+      <label className={'inline-flex items-center text-nowrap flex-grow gap-2'}>
+        <span className={'font-bold w-24'}>시리즈 썸네일</span>
+        <input
+          type="text"
+          placeholder="시리즈의 썸네일 링크"
+          className="flex-grow p-2 border border-gray-300 rounded text-black"
+          onChange={(e) => setSeriesThumbnail(e.target.value)}
+          value={seriesThumbnail || ''}
+        />
+      </label>
+
+      <div className={'inline-flex items-stretch justify-center h-8 gap-2'}>
+        <button
+          onClick={() => setCreateSeriesOpen(false)}
+          className={'w-1/3 bg-gray-200 shadow'}
+        >
+          취소
+        </button>
+        <button onClick={postSeries} className={'w-1/3 bg-emerald-500 shadow'}>
+          생성
+        </button>
+      </div>
+    </div>
+  );
+};
+export default CreateSeriesOverlayContainer;
diff --git a/app/entities/post/series/SeriesDropdownItem.tsx b/app/entities/series/SeriesDropdownItem.tsx
similarity index 88%
rename from app/entities/post/series/SeriesDropdownItem.tsx
rename to app/entities/series/SeriesDropdownItem.tsx
index 285439f..e37b57a 100644
--- a/app/entities/post/series/SeriesDropdownItem.tsx
+++ b/app/entities/series/SeriesDropdownItem.tsx
@@ -1,18 +1,20 @@
 import Link from 'next/link';
 
 interface SeriesDropdownItemProps {
+  seriesSlug: string;
   setSeriesOpen: (open: boolean) => void;
   seriesTitle: string;
   seriesCount: number;
 }
 const SeriesDropdownItem = ({
+  seriesSlug,
   seriesTitle,
   seriesCount,
   setSeriesOpen,
 }: SeriesDropdownItemProps) => {
   return (
     <Link
-      href="#"
+      href={`/posts?series=${seriesSlug}`}
       className="block px-4 py-3 hover:bg-overlay-200 transition-colors"
       onClick={() => setSeriesOpen(false)}
     >
diff --git a/app/entities/series/api/series.ts b/app/entities/series/api/series.ts
new file mode 100644
index 0000000..b9d38cb
--- /dev/null
+++ b/app/entities/series/api/series.ts
@@ -0,0 +1,40 @@
+import axios from 'axios';
+
+export const getAllSeriesData = async (isPopulate: boolean = false) => {
+  const response = await axios.get('/api/series', {
+    params: {
+      populate: isPopulate,
+    },
+  });
+  return response.data;
+};
+
+export const getSeriesData = async (slug: string) => {
+  const response = await axios.get(`/api/series/${slug}`);
+  return response.data;
+};
+
+export const createSeries = async (data: {
+  title: string;
+  description?: string;
+  thumbnailImage?: string;
+  order?: string[];
+  posts?: string[];
+}) => {
+  const response = await axios.post('/api/series', data);
+  return response.data;
+};
+
+export const updateSeries = async (
+  slug: string,
+  data: {
+    title: string;
+    description: string;
+    thumbnailImage: string;
+    order: string[];
+    posts: string[];
+  }
+) => {
+  const response = await axios.put(`/api/series/${slug}`, data);
+  return response.data;
+};
diff --git a/app/entities/series/list/SeriesPreview.tsx b/app/entities/series/list/SeriesPreview.tsx
new file mode 100644
index 0000000..c871703
--- /dev/null
+++ b/app/entities/series/list/SeriesPreview.tsx
@@ -0,0 +1,58 @@
+import Image from 'next/image';
+import { FaBookOpen, FaCalendar } from 'react-icons/fa';
+import React from 'react';
+import { Series } from '@/app/types/Series';
+import Link from 'next/link';
+
+interface SeriesPreviewProps {
+  item: Series;
+}
+
+const SeriesPreview = ({ item }: SeriesPreviewProps) => {
+  return (
+    <Link
+      href={`/posts?series=${item.slug}`}
+      key={item.slug}
+      className="cursor-pointer group bg-white  rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-200 overflow-hidden border border-slate-200"
+    >
+      <div className="relative aspect-video w-full overflow-hidden">
+        {item.thumbnailImage ? (
+          <Image
+            width={400}
+            height={300}
+            src={item.thumbnailImage}
+            alt={item.title}
+            loading={'lazy'}
+            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-200"
+          />
+        ) : (
+          <div className="w-full h-full bg-slate-200 flex items-center justify-center">
+            <FaBookOpen className="w-12 h-12 text-slate-400" />
+          </div>
+        )}
+      </div>
+
+      <div className="p-5">
+        <h3 className="text-black text-xl font-semibold mb-2 line-clamp-2 group-hover:text-emerald-600 transition-colors">
+          {item.title}
+        </h3>
+
+        <div className="flex items-center gap-2 text-sm text-slate-500 mb-3">
+          <span className="flex items-center gap-1">
+            <FaCalendar className="w-4 h-4" />
+            {new Date(item.date).toLocaleDateString()}
+          </span>
+          <span className="ml-auto flex items-center gap-1">
+            <FaBookOpen className="w-4 h-4" />
+            {item.posts.length || 0} posts
+          </span>
+        </div>
+
+        <p className="text-sm text-slate-600 line-clamp-3">
+          {item.description || 'No description available'}
+        </p>
+      </div>
+    </Link>
+  );
+};
+export default SeriesPreview;
diff --git a/app/lib/utils/validate/validate.ts b/app/lib/utils/validate/validate.ts
new file mode 100644
index 0000000..e49dcd1
--- /dev/null
+++ b/app/lib/utils/validate/validate.ts
@@ -0,0 +1,40 @@
+import { PostBody } from '@/app/types/Post';
+
+export const validatePost = (
+  post: PostBody
+): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+
+  // 필수 필드 검사
+  if (!post.title?.trim()) {
+    errors.push('제목은 필수입니다');
+  }
+  if (!post.content?.trim()) {
+    errors.push('내용은 필수입니다');
+  }
+
+  // 길이 제한 검사
+  if (post.title && post.title.length > 100) {
+    errors.push('제목은 100자를 초과할 수 없습니다');
+  }
+  if (post.subTitle && post.subTitle.length > 200) {
+    errors.push('부제목은 200자를 초과할 수 없습니다');
+  }
+  if (post.content && post.content.length > 50000) {
+    errors.push('내용은 20000자를 초과할 수 없습니다');
+  }
+
+  // 최소 길이 검사
+  if (post.title && post.title.length < 2) {
+    errors.push('제목은 최소 2자 이상이어야 합니다');
+  }
+
+  if (post.content && post.content.length < 10) {
+    errors.push('내용은 최소 10자 이상이어야 합니다');
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+  };
+};
diff --git a/app/models/Post.ts b/app/models/Post.ts
index d04eebb..2d0ed99 100644
--- a/app/models/Post.ts
+++ b/app/models/Post.ts
@@ -46,6 +46,16 @@ const postSchema = new Schema(
       required: false,
       default: '',
     },
+    seriesId: {
+      type: Schema.Types.ObjectId,
+      ref: 'Series',
+      required: false,
+    },
+    tags: {
+      type: [String],
+      required: false,
+      default: [],
+    },
   },
   {
     timestamps: true, // createdAt, updatedAt 자동 생성
diff --git a/app/models/Series.ts b/app/models/Series.ts
new file mode 100644
index 0000000..cf541ed
--- /dev/null
+++ b/app/models/Series.ts
@@ -0,0 +1,21 @@
+import { Schema, model, models } from 'mongoose';
+
+const seriesSchema = new Schema(
+  {
+    slug: { type: String, required: true, unique: true },
+    title: { type: String, required: true },
+    description: { type: String, required: false },
+    date: { type: Number, required: true, default: () => Date.now() },
+    posts: [{ type: Schema.Types.ObjectId, ref: 'Post' }],
+    order: [{ type: String }],
+    postCount: { type: Number, required: true, default: 0 },
+    thumbnailImage: { type: String, required: false, default: '' },
+  },
+  {
+    timestamps: true, // createdAt, updatedAt 자동 생성
+  }
+);
+
+const Series = models.Series || model('Series', seriesSchema);
+
+export default Series;
diff --git a/app/posts/layout.tsx b/app/posts/layout.tsx
new file mode 100644
index 0000000..16137b0
--- /dev/null
+++ b/app/posts/layout.tsx
@@ -0,0 +1,11 @@
+import { Suspense } from 'react';
+import SVGLoadingSpinner from '@/app/entities/common/Loading/SVGLoadingSpinner';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+const Layout = ({ children }: LayoutProps) => {
+  return <Suspense fallback={<SVGLoadingSpinner />}>{children}</Suspense>;
+};
+
+export default Layout;
diff --git a/app/posts/page.tsx b/app/posts/page.tsx
index fca4532..d0ffc52 100644
--- a/app/posts/page.tsx
+++ b/app/posts/page.tsx
@@ -6,33 +6,55 @@ import PostList from '@/app/entities/post/list/PostList';
 import SearchSection from '@/app/entities/post/list/SearchSection';
 import { debounce } from 'lodash';
 import useSearchQueryStore from '@/app/stores/useSearchQueryStore';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 const BlogList = () => {
   const [posts, setPosts] = useState<Post[]>();
   const [loading, setLoading] = useState(true);
   const [query, setQuery] = useState('');
   const addLatestQuery = useSearchQueryStore((state) => state.addSearchQuery);
-  const getPosts = async (query?: string) => {
-    const response = await axios.get(
-      `/api/posts${query ? `?query=${query}` : ''}`
-    );
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const seriesSlugParam = searchParams.get('series');
+
+  const getPosts = async (query?: string, seriesSlug?: string | null) => {
+    const response = await axios.get(`/api/posts`, {
+      params: {
+        query: query,
+        series: seriesSlug,
+      },
+    });
     const data = await response.data;
     setPosts(data.posts);
     if (query) addLatestQuery(query);
     setLoading(false);
   };
 
+  const resetSearchCondition = () => {
+    setQuery('');
+    router.push('/posts');
+  };
+
   const debouncedGetPosts = useCallback(debounce(getPosts, 500), []);
 
   useEffect(() => {
-    debouncedGetPosts(query);
-  }, [query]);
+    debouncedGetPosts(query, seriesSlugParam);
+  }, [query, seriesSlugParam]);
 
   return (
     <section>
       <h1 className={'text-4xl text-center font-bold mt-8'}>발행된 글</h1>
-      <SearchSection query={query} setQuery={setQuery} />
-      <PostList query={query} loading={loading} posts={posts} />
+      <SearchSection
+        query={query}
+        setQuery={setQuery}
+        resetSearchCondition={resetSearchCondition}
+      />
+      <PostList
+        query={query}
+        loading={loading}
+        posts={posts}
+        resetSearchCondition={resetSearchCondition}
+      />
     </section>
   );
 };
diff --git a/app/series/page.tsx b/app/series/page.tsx
new file mode 100644
index 0000000..4f37301
--- /dev/null
+++ b/app/series/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { FaBookOpen } from 'react-icons/fa';
+import { getAllSeriesData } from '@/app/entities/series/api/series';
+import { Series } from '@/app/types/Series';
+import SeriesPreview from '@/app/entities/series/list/SeriesPreview';
+import SVGLoadingSpinner from '@/app/entities/common/Loading/SVGLoadingSpinner';
+
+const SeriesListPage = () => {
+  const [series, setSeries] = useState<Series[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const getSeries = async () => {
+    const data = await getAllSeriesData();
+    setSeries(data);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getSeries();
+  }, []);
+
+  if (!loading && series.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-center">
+        <FaBookOpen className="w-12 h-12 text-slate-400 mb-4" />
+        <h3 className="text-xl font-semibold text-slate-700">
+          No Series Found
+        </h3>
+      </div>
+    );
+  }
+
+  return (
+    <section className={'w-full p-10'}>
+      <h1 className={'text-4xl font-bold mt-4'}>시리즈</h1>
+      <p className={'text-lg mb-4'}>시리즈별로 글을 확인해보세요.</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {loading ? (
+          <SVGLoadingSpinner message={'시리즈를 불러오는 중...'} />
+        ) : (
+          series.map((item) => <SeriesPreview item={item} key={item.slug} />)
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default SeriesListPage;
diff --git a/app/types/Post.d.ts b/app/types/Post.d.ts
index b5dfe3a..58883a9 100644
--- a/app/types/Post.d.ts
+++ b/app/types/Post.d.ts
@@ -13,6 +13,7 @@ interface Post {
   profileImage?: string | StaticImport;
   thumbnailImage?: string | StaticImport;
   updatedAt?: number;
+  seriesId?: string;
 }
 type PostBody = Omit<Post, '_id' | 'slug' | 'date' | 'timeToRead' | 'comment'>;
 
diff --git a/app/types/Series.d.ts b/app/types/Series.d.ts
new file mode 100644
index 0000000..afbed49
--- /dev/null
+++ b/app/types/Series.d.ts
@@ -0,0 +1,13 @@
+export interface Series {
+  _id: string;
+  slug: string;
+  title: string;
+  description: string;
+  date: number;
+  posts: string[];
+  order?: string[];
+  postCount: number;
+  thumbnailImage?: string;
+  createdAt: string;
+  updatedAt: string;
+}