diff --git a/components/Icons/CircleIcons.tsx b/components/Icons/CircleIcons.tsx
index 27f49f4b..53ce337e 100644
--- a/components/Icons/CircleIcons.tsx
+++ b/components/Icons/CircleIcons.tsx
@@ -21,7 +21,13 @@ export function CheckCircleIcon({
             fillRule="evenodd"
             clipRule="evenodd"
             d="M8.6035 5.1075L5.812 7.8995C5.71796 7.9929 5.59079 8.04532 5.45825 8.04532C5.32571 8.04532 5.19854 7.9929 5.1045 7.8995L3.3965 6.1915C3.35008 6.14508 3.31325 6.08997 3.28813 6.02931C3.26301 5.96866 3.25008 5.90365 3.25008 5.838C3.25008 5.70541 3.30275 5.57825 3.3965 5.4845C3.49025 5.39075 3.61741 5.33808 3.75 5.33808C3.88259 5.33808 4.00975 5.39075 4.1035 5.4845L5.458 6.839L7.8965 4.4005C7.94292 4.35408 7.99803 4.31725 8.05869 4.29213C8.11934 4.26701 8.18435 4.25408 8.25 4.25408C8.31565 4.25408 8.38066 4.26701 8.44131 4.29213C8.50197 4.31725 8.55708 4.35408 8.6035 4.4005C8.64992 4.44692 8.68675 4.50203 8.71187 4.56269C8.73699 4.62334 8.74992 4.68835 8.74992 4.754C8.74992 4.81965 8.73699 4.88466 8.71187 4.94531C8.68675 5.00597 8.64992 5.06108 8.6035 5.1075ZM6 0.5C2.9625 0.5 0.5 2.9625 0.5 6C0.5 9.0375 2.9625 11.5 6 11.5C9.0375 11.5 11.5 9.0375 11.5 6C11.5 2.9625 9.0375 0.5 6 0.5Z"
-            fill="white"
+            fill={
+              color === "mint"
+                ? "var(--color-mint)"
+                : color === "gray"
+                ? "var(--gray-300)"
+                : "white"
+            }
           />
         </g>
         <defs>
diff --git a/components/Icons/MathIcons.tsx b/components/Icons/MathIcons.tsx
index 95599251..19084502 100644
--- a/components/Icons/MathIcons.tsx
+++ b/components/Icons/MathIcons.tsx
@@ -1,11 +1,20 @@
-export function PlusIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+export function PlusIcon({ color, size }: { color: "white" | "mint"; size: "sm" | "md" }) {
+  return size === "sm" ? (
+    <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.1589 5.40005H6.65889V1.90005C6.65889 1.74092 6.59567 1.58831 6.48315 1.47578C6.37063 1.36326 6.21802 1.30005 6.05889 1.30005C5.89976 1.30005 5.74714 1.36326 5.63462 1.47578C5.5221 1.58831 5.45889 1.74092 5.45889 1.90005V5.40005H1.95889C1.79976 5.40005 1.64714 5.46326 1.53462 5.57578C1.4221 5.68831 1.35889 5.84092 1.35889 6.00005C1.35889 6.15918 1.4221 6.31179 1.53462 6.42431C1.64714 6.53683 1.79976 6.60005 1.95889 6.60005H5.45889V10.1C5.45889 10.2592 5.5221 10.4118 5.63462 10.5243C5.74714 10.6368 5.89976 10.7 6.05889 10.7C6.21802 10.7 6.37063 10.6368 6.48315 10.5243C6.59567 10.4118 6.65889 10.2592 6.65889 10.1V6.60005H10.1589C10.318 6.60005 10.4706 6.53683 10.5832 6.42431C10.6957 6.31179 10.7589 6.15918 10.7589 6.00005C10.7589 5.84092 10.6957 5.68831 10.5832 5.57578C10.4706 5.46326 10.318 5.40005 10.1589 5.40005Z"
-        fill="#00C2B3"
+        fill={color === "mint" ? "#00C2B3" : "white"}
+      />
+    </svg>
+  ) : (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.9317 7.00008H9.09835V1.16675C9.09835 0.901532 8.99299 0.647178 8.80545 0.459641C8.61792 0.272105 8.36356 0.166748 8.09835 0.166748C7.83313 0.166748 7.57878 0.272105 7.39124 0.459641C7.2037 0.647178 7.09835 0.901532 7.09835 1.16675V7.00008H1.26501C0.999798 7.00008 0.745444 7.10544 0.557908 7.29297C0.370372 7.48051 0.265015 7.73486 0.265015 8.00008C0.265015 8.2653 0.370372 8.51965 0.557908 8.70719C0.745444 8.89472 0.999798 9.00008 1.26501 9.00008H7.09835V14.8334C7.09835 15.0986 7.2037 15.353 7.39124 15.5405C7.57878 15.7281 7.83313 15.8334 8.09835 15.8334C8.36356 15.8334 8.61792 15.7281 8.80545 15.5405C8.99299 15.353 9.09835 15.0986 9.09835 14.8334V9.00008H14.9317C15.1969 9.00008 15.4513 8.89472 15.6388 8.70719C15.8263 8.51965 15.9317 8.2653 15.9317 8.00008C15.9317 7.73486 15.8263 7.48051 15.6388 7.29297C15.4513 7.10544 15.1969 7.00008 14.9317 7.00008Z"
+        fill="white"
       />
     </svg>
   );
diff --git a/components/atoms/Select.tsx b/components/atoms/Select.tsx
index 68b20b3b..19cd19ac 100644
--- a/components/atoms/Select.tsx
+++ b/components/atoms/Select.tsx
@@ -13,7 +13,7 @@ interface ISelect {
   setValue: DispatchType<string> | DispatchType<ActiveLocation>;
   isBorder?: boolean;
   type?: "location";
-  size: "sm" | "md" | "lg";
+  size: "xs" | "sm" | "md" | "lg";
   isEllipse?: boolean;
   isFullSize?: boolean;
   isActive?: boolean;
@@ -26,7 +26,7 @@ export default function Select({
   setValue: setParentValue,
   isBorder = true,
   type,
-  size = "sm",
+  size,
   isFullSize,
   isEllipse = true,
   isActive = true,
@@ -53,7 +53,7 @@ export default function Select({
   const adjustWidth = () => {
     if (selectRef.current) {
       const textLength = selectRef.current.selectedOptions[0].text.length;
-      const addSize = size === "sm" ? 44 : size === "md" ? 60 : 0;
+      const addSize = size === "xs" ? 44 : size === "sm" ? 48 : size === "md" ? 60 : 0;
       selectRef.current.style.width = `${textLength * 6.5 + addSize}px`;
     }
   };
@@ -64,8 +64,9 @@ export default function Select({
         <Flex
           justify="center"
           pr={size === "lg" && 4}
+          ml="auto"
           align="center"
-          fontSize={size === "sm" ? "12px" : "12px"}
+          fontSize={size === "xs" ? "12px" : "12px"}
           pointerEvents="none"
         >
           <Box>
@@ -75,34 +76,61 @@ export default function Select({
       }
       ref={selectRef}
       focusBorderColor="#00c2b3"
-      size={size === "sm" ? "xs" : size === "md" ? "md" : "lg"}
+      size={size}
       color="primary"
       value={value}
       onChange={onChange}
       borderRadius={
-        !isEllipse ? undefined : size === "sm" ? "9999px" : size === "md" ? "20px" : "12px"
+        !isEllipse
+          ? undefined
+          : size === "xs"
+          ? "9999px"
+          : size === "sm"
+          ? "8px"
+          : size === "md"
+          ? "20px"
+          : "12px"
       }
       border={!isBorder ? "none" : undefined}
       borderColor="var(--gray-200)"
       bgColor="white"
       fontSize={
-        size === "sm" && !isBorder ? "12px" : size === "sm" || size === "md" ? "11px" : "13px"
+        size === "sm"
+          ? "12px"
+          : size === "xs" && !isBorder
+          ? "12px"
+          : size === "xs" || size === "md"
+          ? "11px"
+          : "13px"
       }
       outline={size === "md" ? "1px solid var(--gray-100)" : undefined}
-      fontWeight={size === "sm" ? 500 : isThick ? 600 : 500}
+      fontWeight={isThick ? 600 : 500}
       isDisabled={!isActive}
-      height={size === "sm" ? (isBorder ? "24px" : "16px") : size === "md" ? "32px" : "52px"}
+      height={
+        size === "xs"
+          ? isBorder
+            ? "24px"
+            : "16px"
+          : size === "sm"
+          ? "28px"
+          : size === "md"
+          ? "32px"
+          : "52px"
+      }
       width={!isFullSize ? "max-content" : "100%"}
-      mr={size === "sm" && !isBorder && "-6px"}
+      mr={size === "xs" && !isBorder && "-6px"}
       sx={{
         paddingInlineStart: !isEllipse
           ? "12px"
-          : size === "sm"
+          : size === "xs"
           ? "8px"
+          : size === "sm"
+          ? "12px"
           : size === "md"
           ? "16px"
           : "20px", // padding-left
-        paddingInlineEnd: !isEllipse ? "16px" : "20px", // padding-right (아이콘 오른쪽에 여유 공간)
+        paddingInlineEnd: size === "sm" ? "4px" : !isEllipse ? "16px" : "20px", // padding-right (아이콘 오른쪽에 여유 공간)
+        paddingBottom: 0,
       }}
       _focus={{
         outline: isBorder ? "var(--border)" : "none",
diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
index eccf6eb7..86678af8 100644
--- a/components/layouts/Header.tsx
+++ b/components/layouts/Header.tsx
@@ -44,8 +44,11 @@ export default function Header({
             </Box>
           )}
         </Flex>
-        {isCenter && <CenterTitle>{title}</CenterTitle>}
-        {isCenter && !children && <Box w={5} />}
+        {isCenter && (
+          <Box fontWeight="bold" flex={1} textAlign="center" fontSize="16px">
+            {title}
+          </Box>
+        )}
         <div>{children}</div>
       </HeaderContainer>
     );
@@ -82,10 +85,3 @@ const HeaderContainer = styled.header<{
   max-width: var(--max-width);
   margin: 0 auto;
 `;
-
-const CenterTitle = styled.div`
-  flex: 1;
-  font-weight: "bold";
-  color: var(--gray-800); /* text-gray-1 - 색상은 예시입니다 */
-  text-align: center;
-`;
diff --git a/components/molecules/ButtonsRow.tsx b/components/molecules/ButtonsRow.tsx
new file mode 100644
index 00000000..a9d05dba
--- /dev/null
+++ b/components/molecules/ButtonsRow.tsx
@@ -0,0 +1,15 @@
+
+interface ButtonsRowProps{
+    
+}
+
+function ButtonsRow({}:ButtonsRowProps){
+
+  return(
+    <>
+
+    </>
+  );
+}
+
+export default ButtonsRow
diff --git a/components/molecules/cards/GroupThumbnailCard.tsx b/components/molecules/cards/GroupThumbnailCard.tsx
new file mode 100644
index 00000000..27b3dbeb
--- /dev/null
+++ b/components/molecules/cards/GroupThumbnailCard.tsx
@@ -0,0 +1,174 @@
+import { Badge, Box, Flex } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+import { ComponentProps } from "react";
+import styled from "styled-components";
+import { ABOUT_USER_SUMMARY } from "../../../constants/serviceConstants/userConstants";
+import { SingleLineText } from "../../../styles/layout/components";
+import {
+  GroupParicipantProps,
+  GroupStatus,
+  IGroupWritingCategory,
+} from "../../../types/models/groupTypes/group";
+import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
+
+import { UserIcon } from "../../Icons/UserIcons";
+import AvatarGroupsOverwrap from "../groups/AvatarGroupsOverwrap";
+
+const VOTER_SHOW_MAX = 4;
+export interface GroupThumbnailCardProps {
+  title: string;
+  text: string;
+  status: "pending" | "end";
+  category: IGroupWritingCategory;
+
+  participants: (GroupParicipantProps | IUserSummary)[];
+  imageProps: {
+    image: string;
+    isPriority?: boolean;
+  };
+  maxCnt: number;
+  id: number;
+}
+
+const STATUS_TO_BADGE_PROPS: Record<GroupStatus, { text: string; colorScheme: string }> = {
+  open: { text: "모집 마감", colorScheme: "red" },
+  close: { text: "취소", colorScheme: "gray" },
+  pending: { text: "모집중", colorScheme: "mint" },
+  end: { text: "종료", colorScheme: "gray" },
+};
+
+export function GroupThumbnailCard({
+  participants,
+  title,
+  status,
+  text,
+  category,
+
+  imageProps,
+  id,
+  maxCnt,
+}: GroupThumbnailCardProps) {
+  const userAvatarArr = participants
+    ?.filter((par) => par)
+    .map((par) =>
+      par.user
+        ? {
+            image: par.user?.profileImage,
+            ...(par.user.avatar?.type !== null ? { avatar: par.user.avatar } : {}),
+          }
+        : { image: ABOUT_USER_SUMMARY.profileImage },
+    );
+
+  return (
+    <CardLink href={`/group/${id}`}>
+      <PlaceImage src={imageProps.image} priority={imageProps.isPriority} />
+      <Flex direction="column" ml="12px" flex={1}>
+        <Flex my={1} justify="space-between" align="center">
+          <Box fontSize="11px" lineHeight="12px">
+            <Box as="span" fontWeight="medium" lineHeight="12px" color="mint">
+              {category.main}
+            </Box>
+            <Box as="span" fontWeight="regular" color="var(--gray-400)">
+              ・
+            </Box>
+            <Box as="span" color="gray.500" fontWeight="regular">
+              {category.sub}
+            </Box>
+          </Box>
+
+          <Badge mr={1} size="lg" colorScheme={STATUS_TO_BADGE_PROPS[status].colorScheme}>
+            {STATUS_TO_BADGE_PROPS[status].text}
+          </Badge>
+        </Flex>
+        <Title>{title}</Title>
+        <Subtitle lineNum={2}>{text}</Subtitle>
+
+        <Flex alignItems="center" justify="space-between">
+          <AvatarGroupsOverwrap userAvatarArr={userAvatarArr} maxCnt={VOTER_SHOW_MAX} />
+          <Flex align="center" color="var(--gray-500)">
+            <UserIcon size="sm" />
+            <Flex ml={1} fontSize="10px" align="center" fontWeight={500}>
+              <Box
+                fontWeight={600}
+                as="span"
+                color={
+                  maxCnt !== 0 && participants.length >= maxCnt
+                    ? "var(--color-red)"
+                    : "var(--color-gray)"
+                }
+              >
+                {participants.length}
+              </Box>
+              <Box as="span" color="var(--gray-400)" mx="2px" fontWeight={300}>
+                /
+              </Box>
+              <Box as="span" color="var(--gray-500)" fontWeight={500}>
+                {maxCnt === 0 ? <i className="fa-regular fa-infinity" /> : maxCnt}
+              </Box>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </CardLink>
+  );
+}
+
+type PlaceImageProps = Omit<ComponentProps<typeof Image>, "alt" | "sizes" | "fill">;
+
+function PlaceImage(props: PlaceImageProps) {
+  return (
+    <Box
+      aspectRatio={1 / 1}
+      borderRadius="var(--rounded-lg)"
+      position="relative"
+      overflow="hidden"
+      pos="relative"
+      w="98px"
+      h="98px"
+    >
+      <Image
+        {...props}
+        alt="thumbnailImage"
+        sizes="98px"
+        fill
+        style={{
+          objectFit: "cover",
+        }}
+      />
+    </Box>
+  );
+}
+
+const CardLink = styled(Link)`
+  height: fit-content;
+  display: flex;
+
+  border-radius: 12px;
+  background-color: white;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: var(--gray-200);
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 16px;
+  }
+`;
+
+const Title = styled(SingleLineText)`
+  font-weight: 700;
+  font-size: 16px;
+  margin-bottom: 4px;
+  line-height: 24px;
+  color: var(--gray-800);
+`;
+
+const Subtitle = styled(SingleLineText)`
+  color: var(--gray-500);
+  font-size: 12px;
+  font-weight: regular;
+  line-height: 18px;
+  margin-bottom: 12px;
+`;
diff --git a/components/molecules/groups/ButtonGroups.tsx b/components/molecules/groups/ButtonGroups.tsx
index f687a4a5..843aaeb2 100644
--- a/components/molecules/groups/ButtonGroups.tsx
+++ b/components/molecules/groups/ButtonGroups.tsx
@@ -37,14 +37,21 @@ export default function ButtonGroups({
             <Button
               mr={idx !== buttonOptionsArr.length - 1 ? "8px" : 0}
               variant={buttonOptions.text === currentValue ? undefined : "outline"}
-              bgColor={buttonOptions.text === currentValue ? "var(--gray-800) !important" : "white"}
-              color={buttonOptions.text === currentValue ? "white" : "var(--gray-800)"}
+              bgColor="white !important"
+              color={buttonOptions.text === currentValue ? "mint" : "gray.600"}
+              fontWeight={buttonOptions.text === currentValue ? "medium" : "regular"}
               size={size}
-              px={size === "sm" ? "16px" : "undefined"}
-              rounded={isEllipse ? "2xl" : "md"}
+              h={size === "md" ? "32px" : undefined}
+              px={size === "md" ? "12px" : size === "sm" ? "16px" : "undefined"}
+              rounded={isEllipse ? "16px" : "md"}
               leftIcon={buttonOptions?.icon}
-              fontSize="11px"
-              border={size === "sm" ? "1px solid var(--gray-300)" : undefined}
+              fontSize="12px"
+              border={"1px solid var(--gray-200)"}
+              borderColor={
+                buttonOptions.text === currentValue
+                  ? "var(--color-mint) !important"
+                  : "var(--gray-200)"
+              }
               {...(height && { h: `${height}px` })}
             >
               {buttonOptions.text}
diff --git a/components/molecules/navs/TabNav.tsx b/components/molecules/navs/TabNav.tsx
index 14c7653b..ce5014a2 100644
--- a/components/molecules/navs/TabNav.tsx
+++ b/components/molecules/navs/TabNav.tsx
@@ -10,6 +10,7 @@ interface ITabNav {
   hasBorder?: boolean;
   isMain?: boolean;
   isFullSize?: boolean;
+  isBlack?: boolean;
 }
 
 export default function TabNav({
@@ -18,6 +19,7 @@ export default function TabNav({
   hasBorder = true,
   isMain = false,
   isFullSize,
+  isBlack,
 }: ITabNav) {
   const idx = tabOptionsArr.findIndex((tab) => tab.text === selected);
 
@@ -26,7 +28,7 @@ export default function TabNav({
       <Tabs
         index={selected ? idx : undefined}
         color="var(--gray-500)"
-        colorScheme="mint"
+        colorScheme={!isBlack ? "mint" : "black"}
         bgColor="white"
         height="44px"
       >
@@ -56,6 +58,7 @@ export default function TabNav({
               p={!isMain ? "8px 20px" : "8px 16px"}
               flex={isFullSize ? 1 : undefined}
               key={tab.text}
+              color={tab.text === selected ? "black" : undefined}
               onClick={tab.text !== selected ? tab.func : undefined}
               _focus={{
                 outline: "none",
diff --git a/components/organisms/sliders/ImageTileSlider.tsx b/components/organisms/sliders/ImageTileSlider.tsx
index f3337323..add04fd3 100644
--- a/components/organisms/sliders/ImageTileSlider.tsx
+++ b/components/organisms/sliders/ImageTileSlider.tsx
@@ -3,7 +3,7 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";
 
-import { AspectRatio, Box } from "@chakra-ui/react";
+import { AspectRatio, Box, Flex } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import styled, { css } from "styled-components";
@@ -23,6 +23,7 @@ export interface IImageTile {
   url?: string;
   func?: () => void;
   priority?: boolean;
+  type?: "circle";
 }
 
 interface IImageTileSlider {
@@ -37,15 +38,54 @@ function ImageTileSlider({ imageTileArr, size, aspect = 1, slidesPerView }: IIma
     <Swiper slidesPerView={slidesPerView} spaceBetween={12}>
       {imageTileArr.map((imageTile, index) => (
         <SwiperSlide key={index}>
-          <Wrapper size={size} onClick={imageTile?.func}>
-            {imageTile?.url ? (
-              <CustomLink href={imageTile.url}>
+          {imageTile.type === "circle" ? (
+            <Link href={imageTile.url}>
+              <Flex direction="column" h="84px" w="64px">
+                <Flex
+                  justify="center"
+                  align="center"
+                  w="64px"
+                  h="64px"
+                  border="2px solid var(--gray-300)"
+                  borderRadius="50%"
+                  p="2px"
+                >
+                  <Box w="56px" h="56px" borderRadius="50%" position="relative" overflow="hidden">
+                    <Image
+                      src={imageTile.imageUrl}
+                      priority={imageTile?.priority}
+                      fill={true}
+                      alt="slideImage"
+                      sizes="60px"
+                    />
+                  </Box>
+                </Flex>
+                <Box
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                  overflow="hidden"
+                  mt={2}
+                  fontSize="10px"
+                  fontWeight="medium"
+                  color="gray.600"
+                  lineHeight="12px"
+                  h="12px"
+                >
+                  {imageTile.text}
+                </Box>
+              </Flex>
+            </Link>
+          ) : (
+            <Wrapper size={size} onClick={imageTile?.func}>
+              {imageTile?.url ? (
+                <CustomLink href={imageTile.url}>
+                  <SlideItem imageTile={imageTile} size={size} aspect={aspect} />
+                </CustomLink>
+              ) : (
                 <SlideItem imageTile={imageTile} size={size} aspect={aspect} />
-              </CustomLink>
-            ) : (
-              <SlideItem imageTile={imageTile} size={size} aspect={aspect} />
-            )}
-          </Wrapper>
+              )}
+            </Wrapper>
+          )}
         </SwiperSlide>
       ))}
     </Swiper>
diff --git a/hooks/groupStudy/queries.ts b/hooks/groupStudy/queries.ts
index 2234b317..28e999b0 100644
--- a/hooks/groupStudy/queries.ts
+++ b/hooks/groupStudy/queries.ts
@@ -10,7 +10,7 @@ import {
   GroupCategory,
   GroupStatus,
   IGroup,
-  IGroupAttendance,
+  IGroupAttendance
 } from "../../types/models/groupTypes/group";
 
 export const useGroupQuery = (
@@ -30,6 +30,18 @@ export const useGroupQuery = (
     },
     options,
   );
+export const useGroupsShortQuery = (
+
+  options?: QueryOptions<IGroup[]>,
+) =>
+  useQuery<IGroup[], AxiosError, IGroup[]>(
+    [GROUP_STUDY],
+    async () => {
+      const res = await axios.get<IGroup[]>(`${SERVER_URI}/groupStudy/mine`);
+      return res.data;
+    },
+    options,
+  );
 
 export const useGroupIdQuery = (groupStudyId?: string, options?: QueryOptions<IGroup>) =>
   useQuery<IGroup, AxiosError, IGroup>(
diff --git a/pageTemplates/group/GroupMine.tsx b/pageTemplates/group/GroupMine.tsx
index 2d0a338c..35a446f5 100644
--- a/pageTemplates/group/GroupMine.tsx
+++ b/pageTemplates/group/GroupMine.tsx
@@ -1,5 +1,8 @@
+import { Box, Button, Flex } from "@chakra-ui/react";
+import Link from "next/link";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
+import { PlusIcon } from "../../components/Icons/MathIcons";
 
 import ImageTileSlider, { IImageTile } from "../../components/organisms/sliders/ImageTileSlider";
 import { transferGroupDataState } from "../../recoils/transferRecoils";
@@ -20,16 +23,37 @@ function GroupMine({ myGroups }: IGroupMine) {
       text: group.title,
       url: `/group/${group.id}`,
       func: () => setGroup(group),
+      type: "circle",
     }));
 
   return (
-    <Layout>
+    <Flex pl={5} pt="10px" pb="14px">
+      <Link href="/group/writing/main">
+        <Flex direction="column" w="64px" h="84px" align="center">
+          <Button
+            w="56px"
+            h="56px"
+            color="white"
+            borderRadius="50%"
+            variant="unstyled"
+            bg="gray.800"
+            display="flex"
+            m={1}
+          >
+            <PlusIcon size="md" color="white" />
+          </Button>
+          <Box mt={2} fontSize="10px" lineHeight="12px" fontWeight="regular" color="gray.600">
+            모임 만들기
+          </Box>
+        </Flex>
+      </Link>
+      <Box mx={3} w="1px" bg="gray.200" h="24px" my="auto" />
       {myGroups?.length ? (
-        <ImageTileSlider imageTileArr={imageTileArr} slidesPerView={2.2} size="md" aspect={2} />
+        <ImageTileSlider imageTileArr={imageTileArr} slidesPerView={3.8} size="md" />
       ) : (
         <BlockLayout>가입중인 소모임이 없습니다.</BlockLayout>
       )}
-    </Layout>
+    </Flex>
   );
 }
 
diff --git a/pageTemplates/studyPage/studyPageDrawer/StudyPageDrawerFilterBar.tsx b/pageTemplates/studyPage/studyPageDrawer/StudyPageDrawerFilterBar.tsx
index ca21908b..04c0edcf 100644
--- a/pageTemplates/studyPage/studyPageDrawer/StudyPageDrawerFilterBar.tsx
+++ b/pageTemplates/studyPage/studyPageDrawer/StudyPageDrawerFilterBar.tsx
@@ -25,7 +25,7 @@ function StudyPageDrawerFilterBar({
       <Select
         options={selectOptionArr}
         defaultValue={selectOption}
-        size="sm"
+        size="xs"
         setValue={setSelectOption}
         isBorder={false}
       />
diff --git a/pages/group/index.tsx b/pages/group/index.tsx
index cd6230d2..dce55399 100644
--- a/pages/group/index.tsx
+++ b/pages/group/index.tsx
@@ -1,28 +1,28 @@
 import { Box, Flex } from "@chakra-ui/react";
-import { useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 
-import WritingButton from "../../components/atoms/buttons/WritingButton";
 import { MainLoadingAbsolute } from "../../components/atoms/loaders/MainLoading";
+import SectionHeader from "../../components/atoms/SectionHeader";
 import Select from "../../components/atoms/Select";
+import { CheckCircleIcon } from "../../components/Icons/CircleIcons";
 import Header from "../../components/layouts/Header";
 import Slide from "../../components/layouts/PageSlide";
+import { GroupThumbnailCard } from "../../components/molecules/cards/GroupThumbnailCard";
+import ButtonGroups from "../../components/molecules/groups/ButtonGroups";
 // import RuleModal from "../../components/modals/RuleModal";
-import SectionBar from "../../components/molecules/bars/SectionBar";
-import CheckBoxNav from "../../components/molecules/CheckBoxNav";
 import TabNav, { ITabNavOptions } from "../../components/molecules/navs/TabNav";
 import {
   GROUP_STUDY_CATEGORY_ARR,
   GROUP_STUDY_SUB_CATEGORY,
 } from "../../constants/contentsText/GroupStudyContents";
 import { GROUP_WRITING_STORE } from "../../constants/keys/localStorage";
+import { ABOUT_USER_SUMMARY } from "../../constants/serviceConstants/userConstants";
 import { useGroupQuery } from "../../hooks/groupStudy/queries";
-import GroupBlock from "../../pageTemplates/group/GroupBlock";
 import GroupMine from "../../pageTemplates/group/GroupMine";
 import GroupSkeletonMain from "../../pageTemplates/group/GroupSkeletonMain";
-import GroupSkeletonMine from "../../pageTemplates/group/GroupSkeletonMine";
 import { GroupCategory, IGroup } from "../../types/models/groupTypes/group";
 import { shuffleArray } from "../../utils/convertUtils/convertDatas";
 
@@ -166,30 +166,70 @@ function GroupPage() {
       <Header title="소모임" isBack={false} />
       <Slide isNoPadding>
         <Layout>
-          {!myGroups ? <GroupSkeletonMine /> : <GroupMine myGroups={myGroups} />}
-          <Box px={5} bg="white">
-            <SectionBar title="전체 소모임" size="md" rightComponent={<StatusSelector />} />
+          <GroupMine myGroups={myGroups} />
+          <Box px={5} mt={5} mb={3}>
+            <SectionHeader title="전체 소모임" subTitle="All Small Group">
+              <Select
+                size="sm"
+                isThick
+                defaultValue={status}
+                options={["모집중", "종료"]}
+                setValue={setStatus}
+              />
+            </SectionHeader>
+          </Box>
+          <Box borderBottom="var(--border)" px={5} mb={2}>
+            <TabNav isBlack selected={category.main} tabOptionsArr={mainTabOptionsArr} isMain />
           </Box>
-          <NavWrapper>
-            <TabNav selected={category.main} tabOptionsArr={mainTabOptionsArr} isMain />
-          </NavWrapper>
-          <SubNavWrapper>
-            <CheckBoxNav
+
+          {category.main !== "전체" && (
+            <Box px={5} py={3}>
+              <ButtonGroups
+                buttonOptionsArr={GROUP_STUDY_SUB_CATEGORY[category.main].map((prop) => ({
+                  icon: (
+                    <CheckCircleIcon
+                      color={category.sub === prop ? "mint" : "gray"}
+                      size="sm"
+                      isFill
+                    />
+                  ),
+                  text: prop,
+                  func: () => setCategory((old) => ({ ...old, sub: prop })),
+                }))}
+                currentValue={category.sub}
+                isEllipse
+                size="md"
+              />
+              {/* <CheckBoxNav
               buttonList={GROUP_STUDY_SUB_CATEGORY[category.main]}
               selectedButton={category.sub}
               setSelectedButton={(value: string) => setCategory((old) => ({ ...old, sub: value }))}
-            />
-          </SubNavWrapper>
+            /> */}
+            </Box>
+          )}
           <Box minH="1000px">
             {!groupStudies.length && isLoading ? (
               <GroupSkeletonMain />
             ) : (
-              <Flex direction="column" px={5} py={4}>
+              <Flex direction="column" p={5}>
                 {groupStudies
                   ?.slice()
                   ?.reverse()
-                  ?.map((group) => (
-                    <GroupBlock group={group} key={group.id} />
+                  ?.map((group, idx) => (
+                    <Box key={group.id} pb={3} mb={3} borderBottom="var(--border)">
+                      <GroupThumbnailCard
+                        title={group.title}
+                        text={group.guide}
+                        status={group.status}
+                        category={group.category}
+                        participants={group.participants.map((user) =>
+                          group.isSecret ? ABOUT_USER_SUMMARY : user,
+                        )}
+                        imageProps={{ image: group.image, isPriority: idx < 4 }}
+                        maxCnt={group.memberCnt.max}
+                        id={group.id}
+                      />
+                    </Box>
                   ))}
               </Flex>
             )}
@@ -202,14 +242,13 @@ function GroupPage() {
           ) : undefined}
         </Layout>
       </Slide>
-      <WritingButton url="/group/writing/main" />
     </>
   );
 }
 
 const Layout = styled.div`
   min-height: 100vh;
-  background-color: var(--gray-100);
+
   padding-bottom: 60px;
 `;
 
diff --git a/theme.ts b/theme.ts
index bfa01964..f92f08a3 100644
--- a/theme.ts
+++ b/theme.ts
@@ -253,8 +253,9 @@ const theme = extendTheme({
           px: "8px !important",
           py: "2px",
           h: "20px",
-          fontWeight: 700,
+          fontWeight: "bold",
           fontSize: "11px",
+
           borderRadius: "4px",
         },
       },