diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index df06c5f7f..e9ff0bd40 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,5 +1,5 @@
 export { CATEGORY_API_URL, getCategoryList, postCategory, deleteCategory } from './categories';
-export { getTagList } from './tags';
+export { TAG_API_URL, getTagList } from './tags';
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {
@@ -8,6 +8,7 @@ export {
   SORTING_OPTIONS,
   DEFAULT_SORTING_OPTION,
   getTemplateList,
+  getTemplateExplore,
   getTemplate,
   postTemplate,
   editTemplate,
@@ -25,3 +26,4 @@ export {
   getLoginState,
   checkName,
 } from './authentication';
+export { LIKE_API_URL, postLike, deleteLike } from './like';
diff --git a/frontend/src/api/like.ts b/frontend/src/api/like.ts
new file mode 100644
index 000000000..86369b432
--- /dev/null
+++ b/frontend/src/api/like.ts
@@ -0,0 +1,28 @@
+import { HttpResponse } from 'msw';
+
+import { END_POINTS } from '@/routes';
+import { LikeDeleteRequest, LikePostRequest } from '@/types';
+
+import { customFetch } from './customFetch';
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+export const LIKE_API_URL = `${API_URL}${END_POINTS.LIKES}`;
+
+export const postLike = async ({ templateId }: LikePostRequest) => {
+  const response = await customFetch<HttpResponse>({
+    method: 'POST',
+    url: `${LIKE_API_URL}/${templateId}`,
+  });
+
+  return response;
+};
+
+export const deleteLike = async ({ templateId }: LikeDeleteRequest) => {
+  const response = await customFetch<HttpResponse>({
+    method: 'DELETE',
+    url: `${LIKE_API_URL}/${templateId}`,
+  });
+
+  return response;
+};
diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index ae3651026..960b81e41 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -1,6 +1,7 @@
 import { END_POINTS } from '@/routes';
 import type {
   Template,
+  TemplateRequest,
   TemplateEditRequest,
   TemplateListResponse,
   TemplateUploadRequest,
@@ -8,6 +9,7 @@ import type {
   CustomError,
 } from '@/types';
 import { SortingOption } from '@/types';
+
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL;
@@ -40,12 +42,15 @@ export const getTemplateList = async ({
 }: TemplateListRequest) => {
   const queryParams = new URLSearchParams({
     keyword,
-    memberId: String(memberId),
     sort,
     page: page.toString(),
     size: size.toString(),
   });
 
+  if (memberId) {
+    queryParams.append('memberId', memberId.toString());
+  }
+
   if (categoryId) {
     queryParams.append('categoryId', categoryId.toString());
   }
@@ -54,7 +59,7 @@ export const getTemplateList = async ({
     queryParams.append('tagIds', tagIds.toString());
   }
 
-  const url = `${TEMPLATE_API_URL}?${queryParams.toString()}`;
+  const url = `${TEMPLATE_API_URL}${memberId ? '/login' : ''}?${queryParams.toString()}`;
 
   const response = await customFetch<TemplateListResponse>({
     url,
@@ -71,6 +76,7 @@ export const getTemplateExplore = async ({
   sort = DEFAULT_SORTING_OPTION.key,
   page = 1,
   size = PAGE_SIZE,
+  memberId,
 }: TemplateListRequest) => {
   const queryParams = new URLSearchParams({
     sort,
@@ -78,7 +84,7 @@ export const getTemplateExplore = async ({
     size: size.toString(),
   });
 
-  const url = `${TEMPLATE_API_URL}?${queryParams.toString()}`;
+  const url = `${TEMPLATE_API_URL}${memberId ? '/login' : ''}?${queryParams.toString()}`;
 
   const response = await customFetch<TemplateListResponse>({
     url,
@@ -91,9 +97,9 @@ export const getTemplateExplore = async ({
   throw new Error(response.detail);
 };
 
-export const getTemplate = async (id: number) => {
+export const getTemplate = async ({ id, memberId }: TemplateRequest) => {
   const response = await customFetch<Template>({
-    url: `${TEMPLATE_API_URL}/${id}`,
+    url: `${TEMPLATE_API_URL}/${id}${memberId ? '/login' : ''}`,
   });
 
   if ('sourceCodes' in response) {
diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts
index 53009ee3d..7ae0f15f3 100644
--- a/frontend/src/assets/images/index.ts
+++ b/frontend/src/assets/images/index.ts
@@ -16,6 +16,7 @@ export { default as PersonIcon } from './person.svg';
 export { default as ClockIcon } from './clock.svg';
 export { default as BooksIcon } from './books.svg';
 export { default as CheckCircleIcon } from './checkCircle.svg';
+export { default as LikeIcon } from './like';
 
 // Logo
 export { default as CodeZapLogo } from './codezapLogo.svg';
diff --git a/frontend/src/assets/images/like.tsx b/frontend/src/assets/images/like.tsx
new file mode 100644
index 000000000..078e26c80
--- /dev/null
+++ b/frontend/src/assets/images/like.tsx
@@ -0,0 +1,37 @@
+import { theme } from '../../style/theme';
+
+type State = 'like' | 'unlike' | 'unClickable';
+
+interface Props {
+  state: State;
+  size: number;
+}
+
+const LikeIcon = ({ state, size }: Props) => {
+  const fillColor = {
+    like: theme.color.light.analogous_primary_400,
+    unlike: 'none',
+    unClickable: theme.color.light.secondary_800,
+  }[state];
+
+  const strokeColor = {
+    like: theme.color.light.analogous_primary_400,
+    unlike: theme.color.light.secondary_800,
+    unClickable: theme.color.light.secondary_800,
+  }[state];
+
+  return (
+    <svg width={size} height={size} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M20.42 4.58045C19.9183 4.07702 19.3222 3.67758 18.6658 3.40503C18.0094 3.13248 17.3057 2.99219 16.595 2.99219C15.8842 2.99219 15.1805 3.13248 14.5241 3.40503C13.8678 3.67758 13.2716 4.07702 12.77 4.58045L12 5.36045L11.23 4.58045C10.7283 4.07702 10.1322 3.67758 9.47578 3.40503C8.81941 3.13248 8.11568 2.99219 7.40496 2.99219C6.69425 2.99219 5.99052 3.13248 5.33414 3.40503C4.67776 3.67758 4.08164 4.07702 3.57996 4.58045C1.45996 6.70045 1.32996 10.2804 3.99996 13.0004L12 21.0004L20 13.0004C22.67 10.2804 22.54 6.70045 20.42 4.58045Z'
+        fill={fillColor}
+        stroke={strokeColor}
+        strokeWidth='1'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default LikeIcon;
diff --git a/frontend/src/components/LikeButton/LikeButton.style.ts b/frontend/src/components/LikeButton/LikeButton.style.ts
new file mode 100644
index 000000000..6cb107a01
--- /dev/null
+++ b/frontend/src/components/LikeButton/LikeButton.style.ts
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import { theme } from '@/style/theme';
+
+export const LikeButtonContainer = styled.button<{ isLiked: boolean }>`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  height: 2.5rem;
+  padding: 0 0.75rem;
+
+  color: ${({ isLiked }) => (isLiked ? theme.color.light.analogous_primary_400 : 'white')};
+
+  border: 1px solid
+    ${({ isLiked }) => (isLiked ? theme.color.light.analogous_primary_400 : theme.color.light.secondary_800)};
+  border-radius: 16px;
+`;
diff --git a/frontend/src/components/LikeButton/LikeButton.tsx b/frontend/src/components/LikeButton/LikeButton.tsx
new file mode 100644
index 000000000..f4ec9fcdd
--- /dev/null
+++ b/frontend/src/components/LikeButton/LikeButton.tsx
@@ -0,0 +1,21 @@
+import { LikeIcon } from '@/assets/images';
+import { Text } from '@/components';
+import { theme } from '@/style/theme';
+import { formatWithK } from '@/utils';
+
+import * as S from './LikeButton.style';
+
+interface Props {
+  likesCount: number;
+  isLiked: boolean;
+  onLikeButtonClick: () => void;
+}
+
+const LikeButton = ({ likesCount, isLiked, onLikeButtonClick }: Props) => (
+  <S.LikeButtonContainer isLiked={isLiked} onClick={onLikeButtonClick}>
+    <LikeIcon state={isLiked ? 'like' : 'unlike'} size={20} />
+    <Text.Medium color={theme.color.light.secondary_800}>{formatWithK(likesCount)}</Text.Medium>
+  </S.LikeButtonContainer>
+);
+
+export default LikeButton;
diff --git a/frontend/src/components/LikeCounter/LikeCounter.style.ts b/frontend/src/components/LikeCounter/LikeCounter.style.ts
new file mode 100644
index 000000000..c20386082
--- /dev/null
+++ b/frontend/src/components/LikeCounter/LikeCounter.style.ts
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const LikeCounterContainer = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  height: 1.5rem;
+`;
diff --git a/frontend/src/components/LikeCounter/LikeCounter.tsx b/frontend/src/components/LikeCounter/LikeCounter.tsx
new file mode 100644
index 000000000..26bb5ec31
--- /dev/null
+++ b/frontend/src/components/LikeCounter/LikeCounter.tsx
@@ -0,0 +1,20 @@
+import { LikeIcon } from '@/assets/images';
+import { Text } from '@/components';
+import { theme } from '@/style/theme';
+import { formatWithK } from '@/utils';
+
+import * as S from './LikeCounter.style';
+
+interface Props {
+  likesCount: number;
+  isLiked: boolean;
+}
+
+const LikeCounter = ({ likesCount, isLiked }: Props) => (
+  <S.LikeCounterContainer>
+    <LikeIcon state={isLiked ? 'like' : 'unClickable'} size={14} />
+    <Text.Small color={theme.color.light.secondary_800}>{formatWithK(likesCount)}</Text.Small>
+  </S.LikeCounterContainer>
+);
+
+export default LikeCounter;
diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
index 8e035d336..0311129f4 100644
--- a/frontend/src/components/TemplateCard/TemplateCard.tsx
+++ b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -2,8 +2,8 @@ import { type LanguageName, loadLanguage } from '@uiw/codemirror-extensions-lang
 import { quietlight } from '@uiw/codemirror-theme-quietlight';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 
-import { PersonIcon } from '@/assets/images';
-import { Button, Flex, TagButton, Text } from '@/components';
+import { ClockIcon, PersonIcon } from '@/assets/images';
+import { Button, Flex, LikeCounter, TagButton, Text } from '@/components';
 import { useToggle } from '@/hooks';
 import { theme } from '@/style/theme';
 import type { Tag, TemplateListItem } from '@/types';
@@ -38,16 +38,23 @@ const TemplateCard = ({ template }: Props) => {
     <S.TemplateCardContainer data-testid='template-card'>
       <Flex direction='column' gap='1rem'>
         <Flex justify='space-between' gap='3rem'>
-          <Flex align='center' gap='0.125rem'>
-            <PersonIcon width={14} />
-            <Text.Small color={theme.mode === 'dark' ? theme.color.dark.primary_300 : theme.color.light.primary_500}>
-              {member?.name || ''}
-            </Text.Small>
+          <Flex gap='0.75rem'>
+            <Flex align='center' gap='0.25rem'>
+              <PersonIcon width={14} />
+              <Text.Small color={theme.mode === 'dark' ? theme.color.dark.primary_300 : theme.color.light.primary_500}>
+                {member.name}
+              </Text.Small>
+            </Flex>
+            <Flex align='center' gap='0.25rem'>
+              <ClockIcon width={14} />
+              <S.NoWrapTextWrapper>
+                <Text.Small color={theme.color.light.primary_500}>{formatRelativeTime(modifiedAt)}</Text.Small>
+              </S.NoWrapTextWrapper>
+            </Flex>
+          </Flex>
+          <Flex align='center'>
+            <LikeCounter likesCount={template.likesCount} isLiked={template.isLiked} />
           </Flex>
-
-          <S.NoWrapTextWrapper>
-            <Text.XSmall color={theme.color.light.secondary_500}>{formatRelativeTime(modifiedAt)}</Text.XSmall>
-          </S.NoWrapTextWrapper>
         </Flex>
 
         <S.EllipsisTextWrapper>
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index e68055b59..0e4662558 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -5,6 +5,8 @@ export { default as Header } from './Header/Header';
 export { default as Heading } from './Heading/Heading';
 export { default as Input } from './Input/Input';
 export { default as Layout } from './Layout/Layout';
+export { default as LikeButton } from './LikeButton/LikeButton';
+export { default as LikeCounter } from './LikeCounter/LikeCounter';
 export { default as Modal } from './Modal/Modal';
 export { default as PagingButtons } from './PagingButtons/PagingButtons';
 export { default as SelectList } from './SelectList/SelectList';
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 7dd707349..32bfe2bf8 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -8,9 +8,11 @@ import {
   LOGIN_STATE_API_URL,
   LOGOUT_API_URL,
   SIGNUP_API_URL,
+  TAG_API_URL,
+  LIKE_API_URL,
 } from '@/api';
 import { Category } from '@/types';
-import { TAG_API_URL } from '../api/tags';
+
 import mockCategoryList from './categoryList.json';
 import mockTagList from './tagList.json';
 import mockTemplateList from './templateList.json';
@@ -192,4 +194,58 @@ const categoryHandlers = [
 
 const tagHandlers = [http.get(`${TAG_API_URL}`, () => HttpResponse.json(mockTagList))];
 
-export const handlers = [...tagHandlers, ...templateHandlers, ...categoryHandlers, ...authenticationHandler];
+const likeHandlers = [
+  http.post(`${LIKE_API_URL}/:templateId`, (req) => {
+    const { templateId } = req.params;
+    const template = mockTemplateList.templates.find((temp) => temp.id.toString() === templateId);
+
+    if (!template) {
+      return HttpResponse.json({ status: 404, message: 'Template not found' });
+    }
+
+    if (template.isLiked) {
+      return HttpResponse.json({ status: 400, message: 'Already liked' });
+    }
+
+    template.isLiked = true;
+    template.likesCount += 1;
+
+    return HttpResponse.json({
+      status: 200,
+      message: 'Liked successfully',
+      likesCount: template.likesCount,
+      isLiked: template.isLiked,
+    });
+  }),
+
+  http.delete(`${LIKE_API_URL}/:templateId`, (req) => {
+    const { templateId } = req.params;
+    const template = mockTemplateList.templates.find((temp) => temp.id.toString() === templateId);
+
+    if (!template) {
+      return HttpResponse.json({ status: 404, message: 'Template not found' });
+    }
+
+    if (!template.isLiked) {
+      return HttpResponse.json({ status: 400, message: 'Not liked yet' });
+    }
+
+    template.isLiked = false;
+    template.likesCount -= 1;
+
+    return HttpResponse.json({
+      status: 200,
+      message: 'Disliked successfully',
+      likesCount: template.likesCount,
+      isLiked: template.isLiked,
+    });
+  }),
+];
+
+export const handlers = [
+  ...tagHandlers,
+  ...templateHandlers,
+  ...categoryHandlers,
+  ...authenticationHandler,
+  ...likeHandlers,
+];
diff --git a/frontend/src/mocks/templateList.json b/frontend/src/mocks/templateList.json
index cc26b61af..13cf902a5 100644
--- a/frontend/src/mocks/templateList.json
+++ b/frontend/src/mocks/templateList.json
@@ -4,6 +4,8 @@
       "id": 1,
       "title": "title1",
       "description": "description1",
+      "isLiked": true,
+      "likesCount": 100,
       "thumbnail": {
         "filename": "MyComponent.tsx",
         "content": "import React from 'react';\n\ninterface MyComponentProps {\n  name: string;\n  age: number;\n}\n\nconst MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {\n  return (\n    <div>\n      <h1>Hello, {name}!</h1>\n      <p>You are {age} years old.</p>\n    </div>\n  );\n};",
@@ -29,12 +31,15 @@
         { "id": 5, "name": "Backend" }
       ],
       "modifiedAt": "2024-07-01 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 2,
       "title": "title2",
       "description": "description2가 끝인줄 알았는데 말이지 description이 과연 어디까지 길어질 수 있을지 계속 타이핑 해볼까?",
+      "isLiked": false,
+      "likesCount": 3213,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Hello, world!');",
@@ -60,12 +65,15 @@
         { "id": 4, "name": "React" }
       ],
       "modifiedAt": "2024-07-11 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 3,
       "title": "title3",
       "description": "description3",
+      "isLiked": true,
+      "likesCount": 41233,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class Example { public static void main(String[] args) { System.out.println(\"Hello, World!\"); } }",
@@ -82,12 +90,15 @@
       "category": { "id": 4, "name": "CategoryID4" },
       "tags": [{ "id": 1, "name": "Java" }],
       "modifiedAt": "2024-07-10 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 4,
       "title": "title4",
       "description": "description4",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "body { margin: 0; padding: 0; }",
@@ -107,12 +118,15 @@
         { "id": 7, "name": "Styling" }
       ],
       "modifiedAt": "2024-07-09 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 5,
       "title": "title5",
       "description": "description5",
+      "isLiked": true,
+      "likesCount": 3,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class Program { public static void main(String[] args) { System.out.println(\"Run program\"); } }",
@@ -129,12 +143,15 @@
       "category": { "id": 3, "name": "CategoryID3" },
       "tags": [{ "id": 1, "name": "Java" }],
       "modifiedAt": "2024-07-08 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 6,
       "title": "title6",
       "description": "description6",
+      "isLiked": false,
+      "likesCount": 482,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class Example { public static void main(String[] args) { System.out.println(\"Hello, Example!\"); } }",
@@ -160,12 +177,15 @@
         { "id": 2, "name": "Example" }
       ],
       "modifiedAt": "2024-07-07 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 7,
       "title": "title7",
       "description": "description7",
+      "isLiked": true,
+      "likesCount": 10,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('App running');",
@@ -191,12 +211,15 @@
         { "id": 9, "name": "Frontend" }
       ],
       "modifiedAt": "2024-07-06 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 8,
       "title": "title8",
       "description": "description8",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Index file');",
@@ -213,12 +236,15 @@
       "category": { "id": 3, "name": "CategoryID3" },
       "tags": [],
       "modifiedAt": "2024-07-05 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 9,
       "title": "title9",
       "description": "description9",
+      "isLiked": true,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Main file');",
@@ -244,12 +270,15 @@
         { "id": 7, "name": "Styling" }
       ],
       "modifiedAt": "2024-07-04 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 10,
       "title": "title10",
       "description": "description10",
+      "isLiked": false,
+      "likesCount": 1281,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "print('Hello, Frontend!')",
@@ -269,12 +298,15 @@
         { "id": 10, "name": "Python" }
       ],
       "modifiedAt": "2024-07-03 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 11,
       "title": "title11",
       "description": "description11",
+      "isLiked": true,
+      "likesCount": 19231,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Backend logic');",
@@ -300,12 +332,15 @@
         { "id": 5, "name": "Backend" }
       ],
       "modifiedAt": "2024-07-02 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 12,
       "title": "title12",
       "description": "description12",
+      "isLiked": false,
+      "likesCount": 3,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Example snippet');",
@@ -322,12 +357,15 @@
       "category": { "id": 2, "name": "CategoryID2" },
       "tags": [],
       "modifiedAt": "2024-07-01 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 13,
       "title": "title13",
       "description": "description13",
+      "isLiked": true,
+      "likesCount": 2,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "class OOPExample { constructor() { console.log('OOP Example'); } }",
@@ -353,12 +391,15 @@
         { "id": 8, "name": "OOP" }
       ],
       "modifiedAt": "2024-07-11 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 14,
       "title": "title14",
       "description": "description14",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class Hello { public static void main(String[] args) { System.out.println(\"Hello\"); } }",
@@ -375,12 +416,15 @@
       "category": { "id": 4, "name": "CategoryID4" },
       "tags": [{ "id": 1, "name": "Java" }],
       "modifiedAt": "2024-07-10 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 15,
       "title": "title15",
       "description": "description15",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "print('Example snippet')",
@@ -406,12 +450,15 @@
         { "id": 2, "name": "Example" }
       ],
       "modifiedAt": "2024-07-09 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 16,
       "title": "title16",
       "description": "description16",
+      "isLiked": true,
+      "likesCount": 521,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class Backend { public static void main(String[] args) { System.out.println(\"Backend\"); } }",
@@ -431,12 +478,15 @@
         { "id": 5, "name": "Backend" }
       ],
       "modifiedAt": "2024-07-08 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 17,
       "title": "title17",
       "description": "description17",
+      "isLiked": false,
+      "likesCount": 83,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "import React from 'react';",
@@ -456,12 +506,15 @@
         { "id": 6, "name": "CSS" }
       ],
       "modifiedAt": "2024-07-07 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 18,
       "title": "title18",
       "description": "description18",
+      "isLiked": false,
+      "likesCount": 31,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "class OOP { constructor() { console.log('OOP'); } }",
@@ -488,12 +541,15 @@
         { "id": 2, "name": "Example" }
       ],
       "modifiedAt": "2024-07-06 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 19,
       "title": "title19",
       "description": "description19",
+      "isLiked": true,
+      "likesCount": 90,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "public class JavaSnippet { public static void main(String[] args) { System.out.println(\"Java Snippet\"); } }",
@@ -510,12 +566,15 @@
       "category": { "id": 3, "name": "CategoryID3" },
       "tags": [{ "id": 1, "name": "Java" }],
       "modifiedAt": "2024-07-05 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 20,
       "title": "title20",
       "description": "description20",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "print('Python example')",
@@ -535,12 +594,15 @@
         { "id": 2, "name": "Example" }
       ],
       "modifiedAt": "2024-07-04 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 21,
       "title": "title21",
       "description": "description21",
+      "isLiked": false,
+      "likesCount": 1,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Log snippet');",
@@ -557,12 +619,15 @@
       "category": { "id": 2, "name": "CategoryID2" },
       "tags": [],
       "modifiedAt": "2024-07-03 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 22,
       "title": "title22",
       "description": "description22",
+      "isLiked": false,
+      "likesCount": 5,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "import React from 'react';\n\nconst Component = () => <div>React Component</div>;\n\nexport default Component;",
@@ -582,12 +647,15 @@
         { "id": 6, "name": "CSS" }
       ],
       "modifiedAt": "2024-07-02 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 23,
       "title": "title23",
       "description": "description23",
+      "isLiked": false,
+      "likesCount": 7,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Snippet');",
@@ -604,12 +672,15 @@
       "category": { "id": 4, "name": "CategoryID4" },
       "tags": [],
       "modifiedAt": "2024-07-01 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 24,
       "title": "title24",
       "description": "description24",
+      "isLiked": true,
+      "likesCount": 1,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Frontend snippet');",
@@ -629,12 +700,15 @@
         { "id": 9, "name": "Frontend" }
       ],
       "modifiedAt": "2024-07-11 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 25,
       "title": "title25",
       "description": "description25",
+      "isLiked": false,
+      "likesCount": 4,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "print('Python code')",
@@ -654,12 +728,15 @@
         { "id": 2, "name": "Example" }
       ],
       "modifiedAt": "2024-07-10 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 26,
       "title": "title26",
       "description": "description26",
+      "isLiked": true,
+      "likesCount": 1230,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Backend code');",
@@ -679,12 +756,15 @@
         { "id": 5, "name": "Backend" }
       ],
       "modifiedAt": "2024-07-09 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 27,
       "title": "title27",
       "description": "description27",
+      "isLiked": false,
+      "likesCount": 41,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('React code');",
@@ -704,12 +784,15 @@
         { "id": 6, "name": "CSS" }
       ],
       "modifiedAt": "2024-07-08 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 28,
       "title": "title28",
       "description": "description28",
+      "isLiked": true,
+      "likesCount": 94,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Style snippet');",
@@ -726,12 +809,15 @@
       "category": { "id": 3, "name": "CategoryID3" },
       "tags": [{ "id": 7, "name": "Styling" }],
       "modifiedAt": "2024-07-07 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 29,
       "title": "title29",
       "description": "description29",
+      "isLiked": false,
+      "likesCount": 6,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Frontend code');",
@@ -751,12 +837,15 @@
         { "id": 9, "name": "Frontend" }
       ],
       "modifiedAt": "2024-07-06 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 30,
       "title": "title30",
       "description": "description30",
+      "isLiked": true,
+      "likesCount": 3812,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "print('Another Python example')",
@@ -773,12 +862,15 @@
       "category": { "id": 2, "name": "CategoryID2" },
       "tags": [{ "id": 10, "name": "Python" }],
       "modifiedAt": "2024-07-05 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 31,
       "title": "title31",
       "description": "description31",
+      "isLiked": false,
+      "likesCount": 732,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('JavaScript example');",
@@ -795,12 +887,15 @@
       "category": { "id": 3, "name": "CategoryID3" },
       "tags": [{ "id": 3, "name": "JavaScript" }],
       "modifiedAt": "2024-07-04 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 32,
       "title": "title32",
       "description": "description32",
+      "isLiked": false,
+      "likesCount": 4,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "const Component = () => <div>Another React Component</div>;\n\nexport default Component;",
@@ -820,12 +915,15 @@
         { "id": 6, "name": "CSS" }
       ],
       "modifiedAt": "2024-07-03 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     },
     {
       "id": 33,
       "title": "title33",
       "description": "description33",
+      "isLiked": false,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Empty snippet');",
@@ -842,12 +940,15 @@
       "category": { "id": 2, "name": "CategoryID2" },
       "tags": [],
       "modifiedAt": "2024-07-02 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 1, "name": "MemberID1" }
     },
     {
       "id": 34,
       "title": "title34",
       "description": "description34",
+      "isLiked": true,
+      "likesCount": 0,
       "thumbnail": {
         "filename": "thumbnail.jsx",
         "content": "console.log('Another frontend snippet');",
@@ -867,7 +968,8 @@
         { "id": 9, "name": "Frontend" }
       ],
       "modifiedAt": "2024-07-01 12:34",
-      "createdAt": "2024-07-09 12:34"
+      "createdAt": "2024-07-09 12:34",
+      "member": { "id": 2, "name": "MemberID2" }
     }
   ]
 }
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.style.ts b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
index d84ba1744..190c5a90e 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.style.ts
+++ b/frontend/src/pages/TemplatePage/TemplatePage.style.ts
@@ -64,9 +64,13 @@ export const NoScrollbarContainer = styled.div`
   }
 `;
 
-export const EditButton = styled(Button)``;
+export const EditButton = styled(Button)`
+  padding: 0;
+`;
 
-export const DeleteButton = styled(Button)``;
+export const DeleteButton = styled(Button)`
+  padding: 0;
+`;
 
 export const CustomCodeMirrorTheme = EditorView.theme({
   '.cm-activeLine': { backgroundColor: `transparent !important` },
diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
index b2b6d5b95..0267776b1 100644
--- a/frontend/src/pages/TemplatePage/TemplatePage.tsx
+++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -5,7 +5,7 @@ import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { useParams } from 'react-router-dom';
 
 import { ChevronIcon, ClockIcon, PencilIcon, PersonIcon, TrashcanIcon } from '@/assets/images';
-import { Button, Flex, Heading, Modal, SelectList, TagButton, Text } from '@/components';
+import { Button, Flex, Heading, LikeButton, Modal, SelectList, TagButton, Text } from '@/components';
 import { ToastContext } from '@/contexts';
 import { useCustomContext, useToggle } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
@@ -14,6 +14,7 @@ import type { SourceCodes } from '@/types';
 import { formatRelativeTime, getLanguageByFilename } from '@/utils';
 
 import { useTemplate } from './hooks';
+import { useLike } from './hooks/useLike';
 import * as S from './TemplatePage.style';
 
 const TemplatePage = () => {
@@ -44,6 +45,12 @@ const TemplatePage = () => {
     handleIsOpenList,
   } = useTemplate(Number(id));
 
+  const { likesCount, isLiked, toggleLike } = useLike({
+    templateId: Number(id),
+    initialLikesCount: template?.likesCount || 0,
+    initialIsLiked: template?.isLiked || false,
+  });
+
   if (!template) {
     return <div>템플릿을 불러오는 중...</div>;
   }
@@ -70,7 +77,7 @@ const TemplatePage = () => {
                 <Flex justify='space-between'>
                   <Text.Medium color={theme.color.dark.secondary_500}>{template.category?.name}</Text.Medium>
                   {template.member.name === name && (
-                    <Flex justify='flex-end'>
+                    <Flex gap='1rem'>
                       <S.EditButton
                         size='small'
                         variant='text'
@@ -87,16 +94,20 @@ const TemplatePage = () => {
                   )}
                 </Flex>
 
-                <Heading.Medium color={theme.mode === 'dark' ? theme.color.dark.white : theme.color.light.black}>
-                  {template.title}
-                </Heading.Medium>
+                <Flex align='center' justify='space-between' gap='1rem'>
+                  <Heading.Large color={theme.mode === 'dark' ? theme.color.dark.white : theme.color.light.black}>
+                    {template.title}
+                  </Heading.Large>
+                  <LikeButton likesCount={likesCount} isLiked={isLiked} onLikeButtonClick={toggleLike} />
+                </Flex>
+
                 <Flex gap='0.5rem' align='center'>
                   <Flex align='center' gap='0.125rem'>
                     <PersonIcon width={14} />
                     <Text.Small
                       color={theme.mode === 'dark' ? theme.color.dark.primary_300 : theme.color.light.primary_500}
                     >
-                      {template?.member?.name || ''}
+                      {template.member.name}
                     </Text.Small>
                   </Flex>
                   <Flex align='center' gap='0.125rem'>
diff --git a/frontend/src/pages/TemplatePage/hooks/useLike.ts b/frontend/src/pages/TemplatePage/hooks/useLike.ts
new file mode 100644
index 000000000..3d0d5070a
--- /dev/null
+++ b/frontend/src/pages/TemplatePage/hooks/useLike.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+import { useDislikeMutation, useLikeMutation } from '@/queries/likes';
+
+interface UseLikeProps {
+  templateId: number;
+  initialLikesCount: number;
+  initialIsLiked: boolean;
+}
+
+export const useLike = ({ templateId, initialLikesCount, initialIsLiked }: UseLikeProps) => {
+  const [likesCount, setLikesCount] = useState(initialLikesCount);
+  const [isLiked, setIsLiked] = useState(initialIsLiked);
+
+  const { mutateAsync: likeTemplate } = useLikeMutation();
+  const { mutateAsync: dislikeTemplate } = useDislikeMutation();
+
+  useEffect(() => {
+    setLikesCount(initialLikesCount);
+    setIsLiked(initialIsLiked);
+  }, [initialLikesCount, initialIsLiked]);
+
+  const toggleLike = async () => {
+    const prevLikesCount = likesCount;
+    const prevIsLiked = isLiked;
+
+    try {
+      if (!isLiked) {
+        setIsLiked(true);
+        setLikesCount((prev) => prev + 1);
+        await likeTemplate(templateId);
+      } else {
+        setIsLiked(false);
+        setLikesCount((prev) => prev - 1);
+        await dislikeTemplate(templateId);
+      }
+    } catch (error) {
+      setLikesCount(prevLikesCount);
+      setIsLiked(prevIsLiked);
+    }
+  };
+
+  return {
+    likesCount,
+    isLiked,
+    toggleLike,
+  };
+};
diff --git a/frontend/src/queries/likes/index.ts b/frontend/src/queries/likes/index.ts
new file mode 100644
index 000000000..23f912840
--- /dev/null
+++ b/frontend/src/queries/likes/index.ts
@@ -0,0 +1,2 @@
+export { useLikeMutation } from './useLikeMutation';
+export { useDislikeMutation } from './useDislikeMutation';
diff --git a/frontend/src/queries/likes/useDislikeMutation.ts b/frontend/src/queries/likes/useDislikeMutation.ts
new file mode 100644
index 000000000..72e6e86ca
--- /dev/null
+++ b/frontend/src/queries/likes/useDislikeMutation.ts
@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { deleteLike } from '@/api';
+
+export const useDislikeMutation = () =>
+  useMutation({
+    mutationFn: (templateId: number) => deleteLike({ templateId }),
+  });
diff --git a/frontend/src/queries/likes/useLikeMutation.ts b/frontend/src/queries/likes/useLikeMutation.ts
new file mode 100644
index 000000000..a1eae021b
--- /dev/null
+++ b/frontend/src/queries/likes/useLikeMutation.ts
@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postLike } from '@/api';
+
+export const useLikeMutation = () =>
+  useMutation({
+    mutationFn: (templateId: number) => postLike({ templateId }),
+  });
diff --git a/frontend/src/queries/templates/useTemplateExploreQuery.ts b/frontend/src/queries/templates/useTemplateExploreQuery.ts
index ac26e6ec7..3444e050a 100644
--- a/frontend/src/queries/templates/useTemplateExploreQuery.ts
+++ b/frontend/src/queries/templates/useTemplateExploreQuery.ts
@@ -1,19 +1,25 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
-import { PAGE_SIZE, QUERY_KEY, DEFAULT_SORTING_OPTION } from '@/api';
-import { getTemplateExplore } from '@/api/templates';
+import { PAGE_SIZE, QUERY_KEY, DEFAULT_SORTING_OPTION, getTemplateExplore } from '@/api';
 import type { TemplateListResponse, SortingKey } from '@/types';
 
+import { useAuth } from '../../hooks/authentication/useAuth';
+
 interface Props {
   sort?: SortingKey;
   page?: number;
   size?: number;
 }
 
-export const useTemplateExploreQuery = ({ sort = DEFAULT_SORTING_OPTION.key, page = 1, size = PAGE_SIZE }: Props) =>
-  useQuery<TemplateListResponse, Error>({
-    queryKey: [QUERY_KEY.TEMPLATE_LIST, sort, page, size],
-    queryFn: () => getTemplateExplore({ sort, page, size }),
+export const useTemplateExploreQuery = ({ sort = DEFAULT_SORTING_OPTION.key, page = 1, size = PAGE_SIZE }: Props) => {
+  const {
+    memberInfo: { memberId },
+  } = useAuth();
+
+  return useQuery<TemplateListResponse, Error>({
+    queryKey: [QUERY_KEY.TEMPLATE_LIST, sort, page, size, memberId],
+    queryFn: () => getTemplateExplore({ sort, page, size, memberId }),
     throwOnError: true,
     placeholderData: keepPreviousData,
   });
+};
diff --git a/frontend/src/queries/templates/useTemplateQuery.spec.tsx b/frontend/src/queries/templates/useTemplateQuery.spec.tsx
index 72d4a0b75..7230d4556 100644
--- a/frontend/src/queries/templates/useTemplateQuery.spec.tsx
+++ b/frontend/src/queries/templates/useTemplateQuery.spec.tsx
@@ -1,12 +1,16 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { AuthProvider } from '@/contexts';
+
 import { useTemplateQuery } from './useTemplateQuery';
 
 const queryClient = new QueryClient();
 
 const queryWrapper = ({ children }: { children: React.ReactNode }) => (
-  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  <QueryClientProvider client={queryClient}>
+    <AuthProvider>{children}</AuthProvider>
+  </QueryClientProvider>
 );
 
 describe('useTemplateQuery', () => {
diff --git a/frontend/src/queries/templates/useTemplateQuery.ts b/frontend/src/queries/templates/useTemplateQuery.ts
index ddd6eb3c1..35d674c41 100644
--- a/frontend/src/queries/templates/useTemplateQuery.ts
+++ b/frontend/src/queries/templates/useTemplateQuery.ts
@@ -3,8 +3,15 @@ import { UseQueryResult, useQuery } from '@tanstack/react-query';
 import { QUERY_KEY, getTemplate } from '@/api';
 import type { Template } from '@/types';
 
-export const useTemplateQuery = (id: number): UseQueryResult<Template, Error> =>
-  useQuery<Template, Error>({
-    queryKey: [QUERY_KEY.TEMPLATE, id],
-    queryFn: () => getTemplate(id),
+import { useAuth } from '../../hooks/authentication/useAuth';
+
+export const useTemplateQuery = (id: number): UseQueryResult<Template, Error> => {
+  const {
+    memberInfo: { memberId },
+  } = useAuth();
+
+  return useQuery<Template, Error>({
+    queryKey: [QUERY_KEY.TEMPLATE, id, memberId],
+    queryFn: () => getTemplate({ id, memberId }),
   });
+};
diff --git a/frontend/src/routes/endPoints.ts b/frontend/src/routes/endPoints.ts
index f1a7942f2..0a59aab5f 100644
--- a/frontend/src/routes/endPoints.ts
+++ b/frontend/src/routes/endPoints.ts
@@ -7,6 +7,9 @@ export const END_POINTS = {
   TEMPLATE: '/templates/:id',
   TEMPLATES_UPLOAD: '/templates/upload',
 
+  // like
+  LIKES: '/like',
+
   // categories
   CATEGORIES: '/categories',
 
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index a5968b7f6..9f4b5f858 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -25,6 +25,14 @@ export interface TemplateEditRequest {
   tags: string[];
 }
 
+export interface LikePostRequest {
+  templateId: number;
+}
+
+export interface LikeDeleteRequest {
+  templateId: number;
+}
+
 export interface CategoryListResponse {
   categories: Category[];
 }
@@ -56,6 +64,11 @@ export interface TemplateListRequest {
   memberId?: number | undefined;
 }
 
-export type SortingKey = 'modifiedAt,asc' | 'modifiedAt,desc';
+export interface TemplateRequest {
+  id: number;
+  memberId?: number | undefined;
+}
+
+export type SortingKey = 'modifiedAt,asc' | 'modifiedAt,desc' | 'likesCount,desc';
 
 export type SortingOption = { key: SortingKey; value: string };
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 360722a12..9cf601486 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,10 +2,13 @@ export type { SourceCodes, Tag, Category, Template, TemplateListItem } from './t
 export type {
   SortingKey,
   SortingOption,
+  TemplateRequest,
   TemplateEditRequest,
   TemplateListResponse,
   TemplateUploadRequest,
   TemplateListRequest,
+  LikePostRequest,
+  LikeDeleteRequest,
   CategoryUploadRequest,
   CategoryEditRequest,
   CategoryDeleteRequest,
diff --git a/frontend/src/types/template.ts b/frontend/src/types/template.ts
index f769d84f7..7610c7ef9 100644
--- a/frontend/src/types/template.ts
+++ b/frontend/src/types/template.ts
@@ -27,6 +27,8 @@ export interface Template {
   sourceCodes: SourceCodes[];
   category: Category;
   tags: Tag[];
+  likesCount: number;
+  isLiked: boolean;
   createdAt: string;
   modifiedAt: string;
   member: {
@@ -41,9 +43,11 @@ export interface TemplateListItem {
   description: string;
   thumbnail: Thumbnail;
   tags: Tag[];
+  likesCount: number;
+  isLiked: boolean;
   createdAt: string;
   modifiedAt: string;
-  member?: {
+  member: {
     id: number;
     name: string;
   };
diff --git a/frontend/src/utils/formatWithK.ts b/frontend/src/utils/formatWithK.ts
new file mode 100644
index 000000000..80a459520
--- /dev/null
+++ b/frontend/src/utils/formatWithK.ts
@@ -0,0 +1,9 @@
+export const formatWithK = (number: number) => {
+  if (number < 1000) {
+    return number.toString();
+  }
+
+  const formattedNumber = (Math.floor(number / 100) / 10).toFixed(1);
+
+  return `${formattedNumber}k`;
+};
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 98f5a5449..79afbbf00 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,4 +1,5 @@
 export { formatRelativeTime } from './formatRelativeTime';
+export { formatWithK } from './formatWithK';
 export { getByteSize } from './getByteSize';
 export { getLanguageByFilename } from './getLanguageByFileName';
 export { removeAllWhitespace } from './removeAllWhitespace';