diff.txt

diff --git a/src/assets/icon/hamburger_menu.svg b/src/assets/icon/hamburger_menu.svg
index 63d7eca..bd7e5da 100644
--- a/src/assets/icon/hamburger_menu.svg
+++ b/src/assets/icon/hamburger_menu.svg
@@ -1,4 +1,4 @@
-<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="current" height="current" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
 <line y1="1.5" x2="24" y2="1.5" stroke="#00AAFF" stroke-width="3"/>
 <line y1="11.5" x2="24" y2="11.5" stroke="#00AAFF" stroke-width="3"/>
 <line y1="21.5" x2="24" y2="21.5" stroke="#00AAFF" stroke-width="3"/>
diff --git a/src/assets/icon/navigate_arrow.svg b/src/assets/icon/navigate_arrow.svg
index 4f10d6a..517a1a6 100644
--- a/src/assets/icon/navigate_arrow.svg
+++ b/src/assets/icon/navigate_arrow.svg
@@ -1,4 +1,4 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="current" height="current" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M38.7071 25.7071C39.0976 25.3166 39.0976 24.6834 38.7071 24.2929L32.3431 17.9289C31.9526 17.5384 31.3195 17.5384 30.9289 17.9289C30.5384 18.3195 30.5384 18.9526 30.9289 19.3431L36.5858 25L30.9289 30.6569C30.5384 31.0474 30.5384 31.6805 30.9289 32.0711C31.3195 32.4616 31.9526 32.4616 32.3431 32.0711L38.7071 25.7071ZM12 26L38 26V24L12 24V26Z" fill="white"/>
 <circle cx="25" cy="25" r="24" stroke="#FFFCED" stroke-width="2"/>
 </svg>
diff --git a/src/components/atoms/footer/FooterContactText.tsx b/src/components/atoms/footer/FooterContactText.tsx
index 6780e09..dffd5da 100644
--- a/src/components/atoms/footer/FooterContactText.tsx
+++ b/src/components/atoms/footer/FooterContactText.tsx
@@ -1,11 +1,19 @@
 import React from "react";
+import styled from "styled-components";
+import Colors from "@/constants/ui/Colors";
+import FontStyle from "@/components/ui/FontStyle";
 
 interface FooterContactTextProps {
   text: string;
 }
 
+const StyledFooterContactText = styled.div`
+  color: ${Colors.primary};
+  ${FontStyle.captionRegular}
+`;
+
 const FooterContactText: React.FC<FooterContactTextProps> = ({ text }) => {
-  return <div className=" text-primary captionRegular ">{text}</div>;
+  return <StyledFooterContactText>{text}</StyledFooterContactText>;
 };
 
 export default FooterContactText;
diff --git a/src/components/atoms/footer/FooterLogo.tsx b/src/components/atoms/footer/FooterLogo.tsx
index 0e1733f..811c02a 100644
--- a/src/components/atoms/footer/FooterLogo.tsx
+++ b/src/components/atoms/footer/FooterLogo.tsx
@@ -1,25 +1,53 @@
 import HiarcLogo from "../../../assets/image/hiarc_logo.png";
 import AssetImage from "../image/AssetImage";
+import React from "react";
+import styled from "styled-components";
+import Colors from "@/constants/ui/Colors";
+import FontStyle from "@/components/ui/FontStyle";
+
+const FooterLogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px; /* equivalent to Tailwind's space-x-4 */
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px; /* equivalent to Tailwind's gap-1 */
+`;
+
+const Title = styled.div`
+  ${FontStyle.subhead3Bold}
+
+  color: ${Colors.primary};
+  letter-spacing: -0.02em; /* tracking-tighter; adjust if needed */
+  font-weight: 600; /* semi-bold */
+  white-space: nowrap;
+`;
+
+const Subtitle = styled.p`
+  color: ${Colors.primary};
+  ${FontStyle.captionRegular}
+  white-space: nowrap;
+  margin: 0;
+`;
 
 const FooterLogo: React.FC = () => {
   return (
-    <div className="flex items-center justify-center space-x-4">
-      {/* AssetImage 사용 */}
+    <FooterLogoContainer>
       <AssetImage
         src={HiarcLogo}
         minWidth={40}
-        maxWidth={120}
-        height="w-14 h-14"
+        maxWidth={40}
+        height={56} /* Converted from "w-14 h-14" to 56px (3.5rem) */
       />
-      <div className="flex flex-col gap-1">
-        <div className="text-base text-primary tracking-tighter subhead2SemiBold whitespace-nowrap">
-          HI-ARC 하이아크
-        </div>
-        <p className="text-primary captionRegular whitespace-nowrap">
-          홍익대학교 컴퓨터공학과 알고리즘 학회
-        </p>
-      </div>
-    </div>
+      <TextContainer>
+        <Title>HI-ARC 하이아크</Title>
+        <Subtitle>홍익대학교 컴퓨터공학과 알고리즘 학회</Subtitle>
+      </TextContainer>
+    </FooterLogoContainer>
   );
 };
 
diff --git a/src/components/atoms/header/HamburgerButton.tsx b/src/components/atoms/header/HamburgerButton.tsx
index af496ed..d65ecdd 100644
--- a/src/components/atoms/header/HamburgerButton.tsx
+++ b/src/components/atoms/header/HamburgerButton.tsx
@@ -1,6 +1,73 @@
 import React, { useState, useEffect, useRef } from "react";
-import HamburgerMenuIcon from "@/assets/icon/hamburger_menu.svg?react";
 import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import HamburgerMenuIcon from "@/assets/icon/hamburger_menu.svg?react";
+import Colors from "@/constants/ui/Colors";
+import FontStyles from "@/constants/ui/FontStyles";
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const ToggleButton = styled.button`
+  border: none;
+  background: none;
+  color: ${Colors.primary};
+  transition: color 300ms;
+  &:hover {
+    color: #1d4ed8;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const DropdownMenu = styled.div<{ $isOpen: boolean }>`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 10rem;
+  background-color: #fff;
+  border: 1px solid ${Colors.primary};
+  border-radius: 0.375rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 50;
+  transition: opacity 300ms ease-in-out;
+  opacity: ${(props) => (props.$isOpen ? "1" : "0")};
+  pointer-events: ${(props) => (props.$isOpen ? "auto" : "none")};
+`;
+
+const MenuList = styled.ul`
+  padding: 0.5rem 0;
+  margin: 0;
+  list-style: none;
+`;
+
+const MenuItemButton = styled.button`
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  color: ${Colors.primary};
+  ${FontStyles.body3Medium}
+  font-weight: 600; /* Semi-bold */
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 200ms;
+  &:hover {
+    background-color: ${Colors.gray100};
+  }
+`;
+
+const StyledHamburgerIcon = styled(HamburgerMenuIcon)`
+  width: 2rem;
+  height: 2rem;
+`;
 
 const HamburgerButton: React.FC = () => {
   const navigate = useNavigate();
@@ -11,13 +78,13 @@ const HamburgerButton: React.FC = () => {
     { label: "스터디", onClick: () => navigate("/study") },
     { label: "수상경력", onClick: () => navigate("/award") },
   ];
+
   const [menuOpen, setMenuOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
-  // 메뉴 토글 함수
   const toggleMenu = () => setMenuOpen((prev) => !prev);
 
-  // 외부 클릭 감지 후 메뉴 닫기
+  // Close menu when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -38,55 +105,27 @@ const HamburgerButton: React.FC = () => {
   }, [menuOpen]);
 
   return (
-    <div className="relative flex items-center" ref={dropdownRef}>
-      {/* 햄버거 버튼 */}
-      <button
-        onClick={toggleMenu}
-        className={`
-          text-primary
-          transition 
-          duration-300 
-          hover:text-blue-700 
-          focus:outline-none
-        `}
-      >
-        <HamburgerMenuIcon className="w-8 h-8" />
-      </button>
-
-      {/* 드롭다운 메뉴 (페이드인/아웃 적용) */}
-      <div
-        className={`
-          absolute
-          right-0 
-          top-full 
-          w-40 
-          bg-white 
-          border 
-          border-primary
-          rounded-md 
-          shadow-lg 
-          z-50
-          transition-opacity duration-300 ease-in-out
-          ${menuOpen ? "opacity-100 scale-100" : "opacity-0 scale-100 pointer-events-none"}
-        `}
-      >
-        <ul className="py-2">
+    <Container ref={dropdownRef}>
+      <ToggleButton onClick={toggleMenu}>
+        <StyledHamburgerIcon />
+      </ToggleButton>
+      <DropdownMenu $isOpen={menuOpen}>
+        <MenuList>
           {menuItems.map((item, index) => (
             <li key={index}>
-              <button
+              <MenuItemButton
                 onClick={() => {
                   item.onClick();
-                  setMenuOpen(false); // 메뉴 클릭 시 닫힘
+                  setMenuOpen(false);
                 }}
-                className="block w-full text-left  px-4 py-2 text-primary subhead2SemiBold hover:bg-gray-100 transition duration-200"
               >
                 {item.label}
-              </button>
+              </MenuItemButton>
             </li>
           ))}
-        </ul>
-      </div>
-    </div>
+        </MenuList>
+      </DropdownMenu>
+    </Container>
   );
 };
 
diff --git a/src/components/atoms/header/HeaderMenuButton.tsx b/src/components/atoms/header/HeaderMenuButton.tsx
index a75edd6..5fa33b8 100644
--- a/src/components/atoms/header/HeaderMenuButton.tsx
+++ b/src/components/atoms/header/HeaderMenuButton.tsx
@@ -1,35 +1,36 @@
+import Colors from "@/constants/ui/Colors";
+import FontStyles from "@/constants/ui/FontStyles";
 import React from "react";
+import styled from "styled-components";
 
 interface HeaderMenuButtonProps {
   text: string;
   onClick: () => void;
 }
 
+const StyledButton = styled.button`
+  color: ${Colors.primary};
+  ${FontStyles.subhead3ExtraBold}
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition:
+    background-color 500ms ease,
+    color 500ms ease;
+
+  &:hover {
+    background-color: ${Colors.primary};
+    color: ${Colors.white};
+  }
+`;
+
 const HeaderMenuButton: React.FC<HeaderMenuButtonProps> = ({
   text,
   onClick,
 }) => {
-  return (
-    <button
-      onClick={onClick}
-      className={`
-        text-primary
-        subhead3ExtraBold
-        bg-transparent
-        border-none
-        cursor-pointer
-        px-2
-        py-1
-        rounded-md
-        transition
-        duration-500
-        hover:bg-primary
-        hover:text-white
-      `}
-    >
-      {text}
-    </button>
-  );
+  return <StyledButton onClick={onClick}>{text}</StyledButton>;
 };
 
 export default HeaderMenuButton;
diff --git a/src/components/atoms/header/HiTingButton.tsx b/src/components/atoms/header/HiTingButton.tsx
deleted file mode 100644
index caf27d1..0000000
--- a/src/components/atoms/header/HiTingButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-const HiTingButton: React.FC = () => {
-  return (
-    <a
-      href="https://hi-rating-front-end.vercel.app/"
-      className={`
-      text-primary
-      subhead3ExtraBold
-      px-4
-      py-2
-      rounded-md
-      hover:bg-primary
-      hover:text-white
-      transition
-      duration-300
-    `}
-    >
-      하이팅
-    </a>
-  );
-};
-
-export default HiTingButton;
diff --git a/src/components/atoms/image/AssetImage.tsx b/src/components/atoms/image/AssetImage.tsx
index 7167c19..a4d0e60 100644
--- a/src/components/atoms/image/AssetImage.tsx
+++ b/src/components/atoms/image/AssetImage.tsx
@@ -1,4 +1,7 @@
+import FontStyle from "@/components/ui/FontStyle";
+import Colors from "@/constants/ui/Colors";
 import React from "react";
+import styled from "styled-components";
 
 interface AssetImageProps {
   src: string;
@@ -9,64 +12,57 @@ interface AssetImageProps {
   caption?: string;
 }
 
-const AssetImage: React.FC<AssetImageProps> = ({
-  src,
-  maxWidth = "w-full",
-  minWidth,
-  height = "h-auto",
-  padding = "p-0",
-  caption,
-}) => {
-  // Tailwind 클래스로 변환하는 함수들
-  const getSizeClass = (value: number | string): string => {
-    if (typeof value === "number") {
-      return `h-[${value}px] max-h-full`;
-    }
-    return value === "h-auto" ? "h-full" : `${value} max-h-full`;
-  };
+// 숫자는 px 단위로, 문자열은 그대로 반환하는 헬퍼 함수
+const parseValue = (value: number | string): string =>
+  typeof value === "number" ? `${value}px` : value;
 
-  const getWidthClass = (value: number | string): string => {
-    if (typeof value === "number") {
-      return `max-w-[${value}px] w-full`;
-    }
-    return value === "w-full" ? "w-full max-w-full" : `max-w-[${value}px]`;
-  };
+const Container = styled.div<{ padding: number | string }>`
+  position: relative;
+  padding: ${({ padding }) => parseValue(padding)};
+`;
 
-  const getMinWidthClass = (value: number | string): string => {
-    if (typeof value === "number") {
-      return `min-w-[${value}px]`;
-    }
-    return value === "w-full" ? "min-w-full" : value;
-  };
+interface StyledImageProps {
+  $maxWidth: number | string;
+  $minWidth?: number | string;
+  height: number | string;
+}
 
-  const getPaddingClass = (value: number | string): string => {
-    if (typeof value === "number") {
-      return `p-[${value}px]`;
-    }
-    return value;
-  };
+const StyledImage = styled.img<StyledImageProps>`
+  object-fit: contain;
+  height: ${({ height }) => parseValue(height)};
+  max-height: 100%;
+  width: 100%;
+  max-width: ${({ $maxWidth }) => parseValue($maxWidth)};
+  ${({ $minWidth }) => $minWidth && `min-width: ${parseValue($minWidth)};`}
+`;
 
-  // 인라인 스타일로 minWidth를 강제 적용
-  const minWidthStyle = minWidth
-    ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth }
-    : {};
+const Caption = styled.div`
+  ${FontStyle.body1Medium}
+  position: absolute;
+  bottom: -2rem;
+  color: ${Colors.primary};
+  padding-top: 2.5rem;
+`;
 
+const AssetImage: React.FC<AssetImageProps> = ({
+  src,
+  maxWidth = "100%",
+  minWidth,
+  height = "auto",
+  padding = "0",
+  caption,
+}) => {
   return (
-    <div className={`relative ${getPaddingClass(padding)}`}>
-      <img
+    <Container padding={padding}>
+      <StyledImage
         src={src}
-        style={minWidthStyle}
-        className={`object-contain ${getSizeClass(height)} ${getWidthClass(
-          maxWidth
-        )} ${minWidth ? getMinWidthClass(minWidth) : ""}`}
+        $maxWidth={maxWidth}
+        $minWidth={minWidth}
+        height={height}
         alt="Asset"
       />
-      {caption && (
-        <div className="absolute bottom-2 text-primary captionRegular pt-10">
-          {caption}
-        </div>
-      )}
-    </div>
+      {caption && <Caption>{caption}</Caption>}
+    </Container>
   );
 };
 
diff --git a/src/components/atoms/main_title/CircleContainer.tsx b/src/components/atoms/main_title/CircleContainer.tsx
deleted file mode 100644
index 3f3168c..0000000
--- a/src/components/atoms/main_title/CircleContainer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// src/components/CircleContainer.tsx
-import React from "react";
-import Color from "../../ui/Color";
-
-interface CircleContainerProps {
-  color: string;
-  contentColor?: string;
-  size: number;
-  isHovered?: boolean;
-  animate?: boolean;
-  children: React.ReactNode;
-}
-
-const CircleContainer: React.FC<CircleContainerProps> = ({
-  color,
-  contentColor = Color.primary,
-  size,
-  children,
-  isHovered = true,
-  animate = false,
-}) => {
-  return (
-    <div
-      style={{ width: size, height: size, backgroundColor: color }}
-      className="flex justify-center items-center rounded-full"
-    >
-      <div
-        style={{
-          color: contentColor,
-          opacity: isHovered ? 1 : 0,
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.043), 4rem)",
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-        className={`flex rounded-full justify-center items-center transition-opacity duration-500 display1ExtraBold ${
-          animate ? (isHovered ? "animate-fadeIn" : "animate-fadeOut") : ""
-        }`}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default CircleContainer;
diff --git a/src/components/atoms/main_title/CurvedCornerCell.tsx b/src/components/atoms/main_title/CurvedCornerCell.tsx
deleted file mode 100644
index 97a64d3..0000000
--- a/src/components/atoms/main_title/CurvedCornerCell.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// src/components/CurvedCornerCell.tsx
-import React from "react";
-import CurvedCornerType from "../../../enum/CurevedCornerType";
-import Color from "../../ui/Color";
-
-interface CurvedCornerCellProps {
-  backgroundColor: string;
-  cellSize: number;
-  curveSize: number;
-  color: string;
-  type: string;
-  isHovered: boolean;
-  delay?: boolean;
-  sequence?: number;
-}
-
-const CurvedCornerCell: React.FC<CurvedCornerCellProps> = ({
-  backgroundColor,
-  cellSize,
-  curveSize,
-  color,
-  type,
-  isHovered,
-  delay = false,
-  sequence,
-}) => {
-  // type에 따른 회전 값 설정
-  const getRotation = (type: string) => {
-    switch (type) {
-      case CurvedCornerType.TOP_RIGHT:
-        return 0;
-      case CurvedCornerType.BOTTOM_RIGHT:
-        return 90;
-      case CurvedCornerType.BOTTOM_LEFT:
-        return 180;
-      case CurvedCornerType.TOP_LEFT:
-        return 270;
-      default:
-        return 0;
-    }
-  };
-
-  const rotation = getRotation(type);
-
-  // 배경 사각형의 크기 및 전환 딜레이 계산
-  const rectWidth = isHovered ? "97%" : "0%";
-  const rectHeight = isHovered ? "97%" : "0%";
-  let transitionDelay = "0ms";
-  if (isHovered) {
-    transitionDelay = sequence === 1 ? "0ms" : delay ? "500ms" : "0ms";
-  } else {
-    transitionDelay = sequence === 1 ? "500ms" : "0ms";
-  }
-
-  return (
-    <div
-      style={{
-        width: cellSize,
-        height: cellSize,
-        transform: `rotate(${rotation}deg)`,
-        backgroundColor: Color.transparent, // 컨테이너 배경 (투명)
-      }}
-      className="relative flex items-center justify-center overflow-hidden pointer-events-none"
-    >
-      {/* 확장되는 사각형 (가장 아래 레이어) */}
-      <div
-        style={{
-          backgroundColor: backgroundColor,
-          width: rectWidth,
-          height: rectHeight,
-          transformOrigin: "bottom left",
-          transitionProperty: "transform, width, height",
-          transitionDuration: "0.5s",
-          transitionTimingFunction: "ease",
-          transitionDelay: transitionDelay,
-        }}
-        className="absolute bottom-[1px] left-[1px] rounded-[10%] z-[-1]"
-      />
-      {/* 왼쪽 상단 곡선 */}
-      <div
-        style={{
-          width: curveSize,
-          height: curveSize,
-          backgroundColor: color,
-          transform: "rotate(180deg)",
-        }}
-        className="absolute top-0 left-0 rounded-tl-full z-10"
-      />
-      {/* 오른쪽 하단 곡선 */}
-      <div
-        style={{
-          width: curveSize,
-          height: curveSize,
-          backgroundColor: color,
-          transform: "rotate(180deg)",
-        }}
-        className="absolute bottom-0 right-0 rounded-br-full z-10"
-      />
-    </div>
-  );
-};
-
-export default CurvedCornerCell;
diff --git a/src/components/atoms/main_title/MenuButton.tsx b/src/components/atoms/main_title/MenuButton.tsx
deleted file mode 100644
index 5d0066e..0000000
--- a/src/components/atoms/main_title/MenuButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// src/components/MenuButton.tsx
-import Color from "@/components/ui/Color";
-import React from "react";
-
-interface MenuButtonProps {
-  color?: string; // 예: Color.primary
-  buttonText: string;
-  width: number;
-  height: number;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-const MenuButton: React.FC<MenuButtonProps> = ({
-  color = Color.primary,
-  buttonText,
-  width,
-  height,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-}) => {
-  return (
-    <button
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      className="flex justify-center items-center cursor-pointer border-none"
-    >
-      <div
-        className="text-white"
-        style={{
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.036), 3.6rem)",
-          fontWeight: 700,
-          fontFamily: '"NanumSquareNeoHeavy"',
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-      >
-        {buttonText}
-      </div>
-    </button>
-  );
-};
-
-export default MenuButton;
diff --git a/src/components/atoms/main_title/MobileCircleContainer.tsx b/src/components/atoms/main_title/MobileCircleContainer.tsx
deleted file mode 100644
index fbbcdb6..0000000
--- a/src/components/atoms/main_title/MobileCircleContainer.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// src/components/MobileCircleContainer.tsx
-import React from "react";
-import Color from "../../ui/Color";
-
-interface MobileCircleContainerProps {
-  color: string;
-  contentColor?: string;
-  size: number;
-  isHovered?: boolean;
-  animate?: boolean;
-  children: React.ReactNode;
-}
-
-const MobileCircleContainer: React.FC<MobileCircleContainerProps> = ({
-  color,
-  contentColor = Color.primary,
-  size,
-  children,
-  isHovered = true,
-  animate = false,
-}) => {
-  return (
-    <div
-      style={{ width: size, height: size, backgroundColor: color }}
-      className="flex justify-center items-center rounded-full"
-    >
-      <div
-        style={{
-          color: contentColor,
-          opacity: isHovered ? 1 : 0,
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.086), 4rem)",
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-        className={`flex rounded-full justify-center items-center transition-opacity duration-500 display1ExtraBold ${
-          animate ? (isHovered ? "animate-fadeIn" : "animate-fadeOut") : ""
-        }`}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default MobileCircleContainer;
diff --git a/src/components/atoms/main_title/MobileMenuButton.tsx b/src/components/atoms/main_title/MobileMenuButton.tsx
deleted file mode 100644
index 9402cd0..0000000
--- a/src/components/atoms/main_title/MobileMenuButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// src/components/MobileMenuButton.tsx
-import Color from "@/components/ui/Color";
-import React from "react";
-
-interface MobileMenuButtonProps {
-  color?: string; // 예: Color.primary
-  buttonText: string;
-  width: number;
-  height: number;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({
-  color = Color.primary,
-  buttonText,
-  width,
-  height,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-}) => {
-  return (
-    <button
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      className="flex justify-center items-center cursor-pointer border-none"
-    >
-      <div
-        className="text-white"
-        style={{
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.072), 3.6rem)",
-          fontWeight: 700,
-          fontFamily: '"NanumSquareNeoHeavy"',
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-      >
-        {buttonText}
-      </div>
-    </button>
-  );
-};
-
-export default MobileMenuButton;
diff --git a/src/components/atoms/main_title/MobileRoundedRectangleContainer copy.tsx b/src/components/atoms/main_title/MobileRoundedRectangleContainer copy.tsx
deleted file mode 100644
index 9cee805..0000000
--- a/src/components/atoms/main_title/MobileRoundedRectangleContainer copy.tsx	
+++ /dev/null
@@ -1,41 +0,0 @@
-// src/components/MobileRoundedRectangleContainer.tsx
-import React from "react";
-import Color from "../../ui/Color";
-// FontStyle를 Tailwind 커스텀 클래스(`display1ExtraBold`)로 대체한다고 가정합니다.
-
-interface MobileRoundedRectangleContainerProps {
-  color: string;
-  width: number;
-  height: number;
-  text: string;
-}
-
-const MobileRoundedRectangleContainer: React.FC<
-  MobileRoundedRectangleContainerProps
-> = ({ color, width, height, text }) => {
-  return (
-    <div
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      className="flex justify-center items-center"
-    >
-      <div
-        style={{
-          color: Color.primary,
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.086), 4.3rem)",
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-        className="display1ExtraBold" // Tailwind 커스텀 폰트 스타일 클래스
-      >
-        {text}
-      </div>
-    </div>
-  );
-};
-
-export default MobileRoundedRectangleContainer;
diff --git a/src/components/atoms/main_title/MobileRoundedRectangleContainer.tsx b/src/components/atoms/main_title/MobileRoundedRectangleContainer.tsx
deleted file mode 100644
index 9cee805..0000000
--- a/src/components/atoms/main_title/MobileRoundedRectangleContainer.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// src/components/MobileRoundedRectangleContainer.tsx
-import React from "react";
-import Color from "../../ui/Color";
-// FontStyle를 Tailwind 커스텀 클래스(`display1ExtraBold`)로 대체한다고 가정합니다.
-
-interface MobileRoundedRectangleContainerProps {
-  color: string;
-  width: number;
-  height: number;
-  text: string;
-}
-
-const MobileRoundedRectangleContainer: React.FC<
-  MobileRoundedRectangleContainerProps
-> = ({ color, width, height, text }) => {
-  return (
-    <div
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      className="flex justify-center items-center"
-    >
-      <div
-        style={{
-          color: Color.primary,
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.086), 4.3rem)",
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-        className="display1ExtraBold" // Tailwind 커스텀 폰트 스타일 클래스
-      >
-        {text}
-      </div>
-    </div>
-  );
-};
-
-export default MobileRoundedRectangleContainer;
diff --git a/src/components/atoms/main_title/RoundedRectangleContainer.tsx b/src/components/atoms/main_title/RoundedRectangleContainer.tsx
deleted file mode 100644
index 1ce2377..0000000
--- a/src/components/atoms/main_title/RoundedRectangleContainer.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// src/components/RoundedRectangleContainer.tsx
-import React from "react";
-import Color from "../../ui/Color";
-// FontStyle를 Tailwind 커스텀 클래스(`display1ExtraBold`)로 대체한다고 가정합니다.
-
-interface RoundedRectangleContainerProps {
-  color: string;
-  width: number;
-  height: number;
-  text: string;
-}
-
-const RoundedRectangleContainer: React.FC<RoundedRectangleContainerProps> = ({
-  color,
-  width,
-  height,
-  text,
-}) => {
-  return (
-    <div
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      className="flex justify-center items-center"
-    >
-      <div
-        style={{
-          color: Color.primary,
-          fontSize: "clamp(0rem, calc((100vw - 10.4rem) * 0.043), 4.3rem)",
-          wordSpacing: "-0.1rem",
-          letterSpacing: "-0.07em",
-        }}
-        className="display1ExtraBold" // Tailwind 커스텀 폰트 스타일 클래스
-      >
-        {text}
-      </div>
-    </div>
-  );
-};
-
-export default RoundedRectangleContainer;
diff --git a/src/components/atoms/section_grid_view/SectionRoundedRectangleContainer.tsx b/src/components/atoms/section_grid_view/SectionRoundedRectangleContainer.tsx
index 779a090..8e04db6 100644
--- a/src/components/atoms/section_grid_view/SectionRoundedRectangleContainer.tsx
+++ b/src/components/atoms/section_grid_view/SectionRoundedRectangleContainer.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import Color from "../../ui/Color";
 import NavigateArrow from "@/assets/icon/navigate_arrow.svg?react";
 
@@ -12,6 +13,44 @@ interface SectionRoundedRectangleContainerProps {
   onClick?: () => void;
 }
 
+const Container = styled.div<{
+  width: number;
+  height: number;
+  bgColor: string;
+  isButton: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  width: ${({ width }) => width}px;
+  height: ${({ height }) => height}px;
+  border-radius: ${({ height }) => height}px;
+  background-color: ${({ bgColor }) => bgColor};
+  ${({ isButton }) => isButton && "cursor: pointer;"}
+`;
+
+const TextContainer = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Text = styled.span<{ textColor: string }>`
+  color: ${({ textColor }) => textColor};
+  font-size: clamp(2.4rem, calc((100vw - 6rem) * 0.034), 2.7rem);
+  word-spacing: -0.1rem;
+  letter-spacing: -0.07em;
+  font-weight: 800; /* Extra Bold */
+`;
+
+const ArrowContainer = styled.div`
+  width: 35px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const SectionRoundedRectangleContainer: React.FC<
   SectionRoundedRectangleContainerProps
 > = ({
@@ -24,37 +63,22 @@ const SectionRoundedRectangleContainer: React.FC<
   onClick,
 }) => {
   return (
-    <div
+    <Container
       onClick={isButton ? onClick : undefined}
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        borderRadius: `${height}px`,
-        backgroundColor: color,
-      }}
-      className={`flex items-center ${isButton ? "cursor-pointer" : ""}`}
+      width={width}
+      height={height}
+      bgColor={color}
+      isButton={isButton}
     >
-      {/* 텍스트 영역: 화살표가 차지하는 영역을 제외한 나머지 공간에서 중앙 정렬 */}
-      <div className="flex-1 flex justify-center items-center">
-        <span
-          style={{
-            color: textColor,
-            fontSize: "clamp(2.4rem, calc((100vw - 6rem) * 0.034), 2.7rem)",
-            wordSpacing: "-0.1rem",
-            letterSpacing: "-0.07em",
-          }}
-          className="display1ExtraBold"
-        >
-          {text}
-        </span>
-      </div>
-      {/* 화살표 영역: isButton이 true일 때만, 오른쪽에 고정된 폭으로 배치 */}
+      <TextContainer>
+        <Text textColor={textColor}>{text}</Text>
+      </TextContainer>
       {isButton && (
-        <div className="w-[35px] mr-4 flex items-center justify-center">
+        <ArrowContainer>
           <NavigateArrow width="40px" height="40px" />
-        </div>
+        </ArrowContainer>
       )}
-    </div>
+    </Container>
   );
 };
 
diff --git a/src/components/molecules/articel_header/ArticleGridItem.tsx b/src/components/molecules/articel_header/ArticleGridItem.tsx
deleted file mode 100644
index 02055d4..0000000
--- a/src/components/molecules/articel_header/ArticleGridItem.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// src/components/ArticleGridItem.tsx
-import React from "react";
-import CellType from "../../../enum/CellType"; // js 파일, 값으로 사용
-import Color from "../../ui/Color";
-import CircleContainer from "../../atoms/main_title/CircleContainer";
-import NavigateArrow from "../../../assets/icon/navigate_arrow.svg?react";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-import SectionRoundedRectangleContainer from "@/components/atoms/section_grid_view/SectionRoundedRectangleContainer";
-
-interface ArticleGridItemProps {
-  data: TopLayerGridItemData;
-  circleSize: number;
-  circleSize2X: number;
-  circleSize3X: number;
-  isHovered: { [key: number]: boolean };
-  visibleItems: number[];
-}
-
-const ArticleGridItem: React.FC<ArticleGridItemProps> = ({
-  data,
-  circleSize,
-  circleSize2X,
-  circleSize3X,
-  isHovered,
-  visibleItems,
-}) => {
-  // data.delay가 있으면 visibleItems에 포함되어야 보이도록 처리합니다.
-  const isVisible = data.delay ? visibleItems.includes(data.delay) : true;
-
-  // 그리드 배치와 관련된 스타일 (column, row, span, opacity)
-  const gridStyle: React.CSSProperties = {
-    gridColumn: data.position[0],
-    gridRow: data.position[1],
-    gridColumnEnd: `span 1`, // columnSpan 기본값 1
-    gridRowEnd: `span 1`, // rowSpan 기본값 1
-    opacity: isVisible ? 1 : 0,
-  };
-
-  // 클릭 시 항상 https://icpc-sinchon.github.io/ 로 이동합니다.
-
-  return (
-    <div
-      style={gridStyle}
-      className="transition-opacity duration-500 ease-in-out"
-    >
-      {data.type === CellType.CIRCLE && (
-        <CircleContainer
-          color={data.color}
-          size={circleSize}
-          children={undefined}
-        />
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_TEXT && (
-        <CircleContainer color={data.color} size={circleSize}>
-          {data.text}
-        </CircleContainer>
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_ICON && (
-        <CircleContainer
-          color={data.color}
-          size={circleSize}
-          isHovered={isHovered[data.index!]}
-          animate={true}
-          contentColor={Color.white}
-        >
-          <NavigateArrow width="30px" height="30px" />
-        </CircleContainer>
-      )}
-
-      {data.type === CellType.HORIZONTAL_RECTANGLE && (
-        <SectionRoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize2X}
-          textColor={data.color === Color.yellow ? Color.primary : Color.white}
-          text={data.text ?? ""}
-        />
-      )}
-
-      {data.type === CellType.LONG_HORIZONTAL_RECTANGLE && (
-        <SectionRoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize3X}
-          text={data.text as string}
-          textColor={data.color === Color.yellow ? Color.primary : Color.white}
-          isButton={true}
-        />
-      )}
-    </div>
-  );
-};
-
-export default ArticleGridItem;
diff --git a/src/components/molecules/footer/FooterContactInfo.tsx b/src/components/molecules/footer/FooterContactInfo.tsx
index 92ea389..868b6d3 100644
--- a/src/components/molecules/footer/FooterContactInfo.tsx
+++ b/src/components/molecules/footer/FooterContactInfo.tsx
@@ -1,25 +1,44 @@
-import FooterContactText from "@/components/atoms/footer/FooterContactText";
 import React from "react";
+import styled from "styled-components";
+import FooterContactText from "@/components/atoms/footer/FooterContactText";
+
+const OuterContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px; /* equivalent to Tailwind's gap-2 */
+`;
+
+const ColumnEnd = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+const ColumnStart = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
 
 const FooterContactInfo: React.FC = () => {
   return (
-    <div className="flex flex-row gap-2">
-      <div className="flex flex-col items-end">
+    <OuterContainer>
+      <ColumnEnd>
         <FooterContactText text="instagram" />
         <FooterContactText text="email" />
         <FooterContactText text="kakao" />
-      </div>
-      <div className="flex flex-col items-end">
+      </ColumnEnd>
+      <ColumnEnd>
         <FooterContactText text="|" />
         <FooterContactText text="|" />
         <FooterContactText text="|" />
-      </div>
-      <div className="flex flex-col items-start">
+      </ColumnEnd>
+      <ColumnStart>
         <FooterContactText text="@hi.arc.official" />
         <FooterContactText text="hiarc.official@gmail.com" />
         <FooterContactText text="@hi-arc" />
-      </div>
-    </div>
+      </ColumnStart>
+    </OuterContainer>
   );
 };
 
diff --git a/src/components/molecules/header/DesktopHeader.tsx b/src/components/molecules/header/DesktopHeader.tsx
index 11d27b4..6e5d79a 100644
--- a/src/components/molecules/header/DesktopHeader.tsx
+++ b/src/components/molecules/header/DesktopHeader.tsx
@@ -1,19 +1,40 @@
 import { useNavigate } from "react-router-dom";
 import HeaderMenuButton from "@/components/atoms/header/HeaderMenuButton";
-import HiTingButton from "@/components/atoms/header/HiTingButton";
+import styled from "styled-components";
+
+const DesktopHeaderContainer = styled.div`
+  display: none;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1.5rem 0;
+`;
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 1000px;
+`;
+
+const Navigation = styled.nav`
+  display: flex;
+  gap: 1.5rem;
+  margin-left: auto;
+`;
 
 const DesktopHeader: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="hidden md:flex flex-col items-center justify-center w-full py-6">
-      {/* 컨텐츠를 감싸는 박스 */}
-      <div className="flex items-center justify-center w-full max-w-[1000px]">
-        {/* 왼쪽: HI-ARC */}
+    <DesktopHeaderContainer>
+      <HeaderContent>
         <HeaderMenuButton text="HI-ARC" onClick={() => navigate("/")} />
-
-        {/* 오른쪽: 네비게이션 메뉴들 */}
-        <nav className="flex space-x-6 ml-auto">
+        <Navigation>
           <HeaderMenuButton
             text="학회소개"
             onClick={() => navigate("/introduce_hiarc")}
@@ -27,10 +48,15 @@ const DesktopHeader: React.FC = () => {
             text="수상경력"
             onClick={() => navigate("/award")}
           />
-          <HiTingButton />
-        </nav>
-      </div>
-    </div>
+          <HeaderMenuButton
+            text="하이팅"
+            onClick={() =>
+              (window.location.href = "https://hi-rating-front-end.vercel.app/")
+            }
+          />
+        </Navigation>
+      </HeaderContent>
+    </DesktopHeaderContainer>
   );
 };
 
diff --git a/src/components/molecules/header/TabletHeader.tsx b/src/components/molecules/header/TabletHeader.tsx
index 120d4bd..9a5c7f3 100644
--- a/src/components/molecules/header/TabletHeader.tsx
+++ b/src/components/molecules/header/TabletHeader.tsx
@@ -2,7 +2,27 @@ import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import HamburgerButton from "@/components/atoms/header/HamburgerButton";
 import HeaderMenuButton from "@/components/atoms/header/HeaderMenuButton";
-import HiTingButton from "@/components/atoms/header/HiTingButton";
+import styled from "styled-components";
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1.5rem 0;
+`;
+
+const LeftContainer = styled.div`
+  flex-grow: 1;
+`;
+
+const RightContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
 
 const TabletHeader: React.FC = () => {
   const navigate = useNavigate();
@@ -29,18 +49,20 @@ const TabletHeader: React.FC = () => {
   }, [menuOpen]);
 
   return (
-    <div className="flex md:hidden items-center w-full max-w-[1000px] mx-auto py-6 justify-between">
-      {/* 왼쪽: HI-ARC (최대 너비를 차지하도록 flex-grow 적용) */}
-      <div className="flex-grow">
+    <HeaderContainer ref={dropdownRef}>
+      <LeftContainer>
         <HeaderMenuButton text="HI-ARC" onClick={() => navigate("/")} />
-      </div>
-
-      {/* 오른쪽: 하이팅 버튼 & 햄버거 메뉴 */}
-      <div className="flex items-center space-x-4">
-        <HiTingButton />
+      </LeftContainer>
+      <RightContainer>
+        <HeaderMenuButton
+          text="하이팅"
+          onClick={() =>
+            (window.location.href = "https://hi-rating-front-end.vercel.app/")
+          }
+        />
         <HamburgerButton />
-      </div>
-    </div>
+      </RightContainer>
+    </HeaderContainer>
   );
 };
 
diff --git a/src/components/molecules/main_title/BottomLayerGridItem.tsx b/src/components/molecules/main_title/BottomLayerGridItem.tsx
deleted file mode 100644
index 0cd77ad..0000000
--- a/src/components/molecules/main_title/BottomLayerGridItem.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// src/components/BottomLayerGridItem.tsx
-import React from "react";
-import CurvedCornerCell from "../../atoms/main_title/CurvedCornerCell";
-import CellType from "@/enum/CellType";
-import Color from "@/components/ui/Color";
-import BottomLayerGridItemData from "@/types/BottomLayerGridItemData";
-
-// CellType의 값들을 유니온 타입으로 추출합니다.
-export type CellTypeValue = (typeof CellType)[keyof typeof CellType];
-
-interface BottomLayerGridItemProps {
-  data: BottomLayerGridItemData;
-  itemSize: number;
-  cornerCurveSize: number;
-  isHovered: { [key: number]: boolean };
-
-  columnSpan?: number;
-  rowSpan?: number;
-}
-
-const BottomLayerGridItem: React.FC<BottomLayerGridItemProps> = ({
-  data,
-  itemSize,
-  cornerCurveSize,
-  isHovered,
-
-  columnSpan = 1,
-  rowSpan = 1,
-}) => {
-  // grid 위치 및 span은 inline style로 적용합니다.
-  const gridStyle: React.CSSProperties = {
-    gridColumn: data.position[0],
-    gridRow: data.position[1],
-    gridColumnEnd: `span ${columnSpan}`,
-    gridRowEnd: `span ${rowSpan}`,
-  };
-
-  return (
-    <div
-      style={gridStyle}
-      className="transition-opacity duration-500 ease-in-out pointer-events-auto"
-    >
-      {data.type === CellType.CURVE && (
-        <CurvedCornerCell
-          key={data.index}
-          cellSize={itemSize}
-          backgroundColor={data.backgroundColor}
-          color={Color.background}
-          curveSize={cornerCurveSize}
-          type={data.direction}
-          isHovered={true}
-          sequence={undefined}
-        />
-      )}
-      {data.type === CellType.ANIMATE_CURVE && (
-        <CurvedCornerCell
-          key={data.index}
-          cellSize={itemSize}
-          backgroundColor={data.backgroundColor}
-          color={Color.background}
-          curveSize={cornerCurveSize}
-          type={data.direction}
-          isHovered={isHovered[data.index!]}
-          sequence={undefined}
-        />
-      )}
-      {data.type === CellType.ANIMATE_CURVE_WITH_DELAY && (
-        <CurvedCornerCell
-          key={data.index}
-          cellSize={itemSize}
-          backgroundColor={data.backgroundColor}
-          color={Color.background}
-          curveSize={cornerCurveSize}
-          type={data.direction}
-          isHovered={isHovered[data.index!]}
-          delay={true}
-          sequence={data.sequence}
-        />
-      )}
-    </div>
-  );
-};
-
-export default BottomLayerGridItem;
diff --git a/src/components/molecules/main_title/MobileTopLayerGridItem.tsx b/src/components/molecules/main_title/MobileTopLayerGridItem.tsx
deleted file mode 100644
index 589045d..0000000
--- a/src/components/molecules/main_title/MobileTopLayerGridItem.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-// src/components/MobileTopLayerGridItem.tsx
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import CellType from "../../../enum/CellType"; // js 파일, 값으로 사용
-import Color from "../../ui/Color";
-import CircleContainer from "../../atoms/main_title/CircleContainer";
-import RoundedRectangleContainer from "@/components/atoms/main_title/RoundedRectangleContainer";
-import MenuButton from "../../atoms/main_title/MenuButton";
-import NavigateArrow from "../../../assets/icon/navigate_arrow.svg?react";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-import MobileRoundedRectangleContainer from "@/components/atoms/main_title/MobileRoundedRectangleContainer copy";
-import MobileCircleContainer from "@/components/atoms/main_title/MobileCircleContainer";
-import MobileMenuButton from "@/components/atoms/main_title/MobileMenuButton";
-
-interface MobileTopLayerGridItemProps {
-  data: TopLayerGridItemData;
-  circleSize: number;
-  circleSize2X: number;
-  circleSize3X: number;
-  isHovered: { [key: number]: boolean };
-  handleMouseEnter: (index: number) => void;
-  handleMouseLeave: (index: number) => void;
-  visibleItems: number[];
-}
-
-const MobileTopLayerGridItem: React.FC<MobileTopLayerGridItemProps> = ({
-  data,
-  circleSize,
-  circleSize2X,
-  circleSize3X,
-  isHovered,
-  handleMouseEnter,
-  handleMouseLeave,
-  visibleItems,
-}) => {
-  const navigate = useNavigate();
-
-  // data.delay가 있으면 visibleItems에 포함되어야 보이도록 처리합니다.
-  const isVisible = data.delay ? visibleItems.includes(data.delay) : true;
-
-  // 그리드 배치와 관련된 스타일 (column, row, span, opacity)
-  const gridStyle: React.CSSProperties = {
-    gridColumn: data.position[0],
-    gridRow: data.position[1],
-    gridColumnEnd: `span 1`, // columnSpan이 별도로 전달되지 않았으므로 기본값 1
-    gridRowEnd: `span 1`, // rowSpan 기본값 1
-    opacity: isVisible ? 1 : 0,
-  };
-
-  return (
-    <div
-      style={gridStyle}
-      className="transition-opacity duration-500 ease-in-out"
-    >
-      {data.type === CellType.CIRCLE && (
-        <MobileCircleContainer
-          color={data.color}
-          size={circleSize}
-          children={undefined}
-        />
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_TEXT && (
-        <MobileCircleContainer color={data.color} size={circleSize}>
-          {data.text}
-        </MobileCircleContainer>
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_ICON && (
-        <MobileCircleContainer
-          color={data.color}
-          size={circleSize}
-          isHovered={isHovered[data.index!]}
-          animate={true}
-          contentColor={Color.white}
-        >
-          <NavigateArrow width="30px" height="30px" />
-        </MobileCircleContainer>
-      )}
-
-      {data.type === CellType.HORIZONTAL_RECTANGLE && (
-        <MobileRoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize2X}
-          text={data.text ?? ""}
-        />
-      )}
-
-      {data.type === CellType.LONG_HORIZONTAL_RECTANGLE && (
-        <MobileRoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize3X}
-          text={data.text as string}
-        />
-      )}
-
-      {data.type === CellType.VERTICAL_RECTANGLE && (
-        <MobileRoundedRectangleContainer
-          color={data.color}
-          height={circleSize2X}
-          width={circleSize}
-          text={""}
-        />
-      )}
-
-      {data.type === CellType.BUTTON && (
-        <MobileMenuButton
-          buttonText={data.buttonText || ""}
-          color={data.color}
-          height={circleSize}
-          width={circleSize2X}
-          onMouseEnter={() => handleMouseEnter(data.index!)}
-          onMouseLeave={() => handleMouseLeave(data.index!)}
-          onClick={() => navigate(data.url || "")}
-        />
-      )}
-
-      {data.type === CellType.TEXT && (
-        <div
-          className="flex text-start"
-          style={{
-            color: Color.primary,
-            fontFamily: "NanumSquareNeoHeavy",
-            fontWeight: 800,
-            lineHeight: 0.92,
-            fontSize: "clamp(0rem, calc((100vw - 60px) * 0.27), 16rem)",
-          }}
-        >
-          HI- ARC
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MobileTopLayerGridItem;
diff --git a/src/components/molecules/main_title/TopLayerGridItem.tsx b/src/components/molecules/main_title/TopLayerGridItem.tsx
deleted file mode 100644
index bbaa2f4..0000000
--- a/src/components/molecules/main_title/TopLayerGridItem.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// src/components/TopLayerGridItem.tsx
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import CellType from "../../../enum/CellType"; // js 파일, 값으로 사용
-import Color from "../../ui/Color";
-import CircleContainer from "../../atoms/main_title/CircleContainer";
-import RoundedRectangleContainer from "@/components/atoms/main_title/RoundedRectangleContainer";
-import MenuButton from "../../atoms/main_title/MenuButton";
-import NavigateArrow from "../../../assets/icon/navigate_arrow.svg?react";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-
-interface TopLayerGridItemProps {
-  data: TopLayerGridItemData;
-  circleSize: number;
-  circleSize2X: number;
-  circleSize3X: number;
-  isHovered: { [key: number]: boolean };
-  handleMouseEnter: (index: number) => void;
-  handleMouseLeave: (index: number) => void;
-  visibleItems: number[];
-}
-
-const TopLayerGridItem: React.FC<TopLayerGridItemProps> = ({
-  data,
-  circleSize,
-  circleSize2X,
-  circleSize3X,
-  isHovered,
-  handleMouseEnter,
-  handleMouseLeave,
-  visibleItems,
-}) => {
-  const navigate = useNavigate();
-
-  // data.delay가 있으면 visibleItems에 포함되어야 보이도록 처리합니다.
-  const isVisible = data.delay ? visibleItems.includes(data.delay) : true;
-
-  // 그리드 배치와 관련된 스타일 (column, row, span, opacity)
-  const gridStyle: React.CSSProperties = {
-    gridColumn: data.position[0],
-    gridRow: data.position[1],
-    gridColumnEnd: `span 1`, // columnSpan이 별도로 전달되지 않았으므로 기본값 1
-    gridRowEnd: `span 1`, // rowSpan 기본값 1
-    opacity: isVisible ? 1 : 0,
-  };
-
-  return (
-    <div
-      style={gridStyle}
-      className="transition-opacity duration-500 ease-in-out"
-    >
-      {data.type === CellType.CIRCLE && (
-        <CircleContainer
-          color={data.color}
-          size={circleSize}
-          children={undefined}
-        />
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_TEXT && (
-        <CircleContainer color={data.color} size={circleSize}>
-          {data.text}
-        </CircleContainer>
-      )}
-
-      {data.type === CellType.CIRCLE_WITH_ICON && (
-        <CircleContainer
-          color={data.color}
-          size={circleSize}
-          isHovered={isHovered[data.index!]}
-          animate={true}
-          contentColor={Color.white}
-        >
-          <NavigateArrow width="30px" height="30px" />
-        </CircleContainer>
-      )}
-
-      {data.type === CellType.HORIZONTAL_RECTANGLE && (
-        <RoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize2X}
-          text={data.text ?? ""}
-        />
-      )}
-
-      {data.type === CellType.LONG_HORIZONTAL_RECTANGLE && (
-        <RoundedRectangleContainer
-          color={data.color}
-          height={circleSize}
-          width={circleSize3X}
-          text={data.text as string}
-        />
-      )}
-
-      {data.type === CellType.VERTICAL_RECTANGLE && (
-        <RoundedRectangleContainer
-          color={data.color}
-          height={circleSize2X}
-          width={circleSize}
-          text={""}
-        />
-      )}
-
-      {data.type === CellType.BUTTON && (
-        <MenuButton
-          buttonText={data.buttonText || ""}
-          color={data.color}
-          height={circleSize}
-          width={circleSize2X}
-          onMouseEnter={() => handleMouseEnter(data.index!)}
-          onMouseLeave={() => handleMouseLeave(data.index!)}
-          onClick={() => navigate(data.url || "")}
-        />
-      )}
-
-      {data.type === CellType.TEXT && (
-        <div
-          className="flex text-start"
-          style={{
-            color: Color.primary,
-            fontFamily: "NanumSquareNeoHeavy",
-            fontWeight: 800,
-            lineHeight: 0.92,
-            fontSize: "clamp(0rem, calc((100vw - 60px) * 0.158), 16rem)",
-          }}
-        >
-          HI- ARC
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TopLayerGridItem;
diff --git a/src/components/molecules/section_gird_view/SectionTopLayerGridItem.tsx b/src/components/molecules/section_gird_view/SectionTopLayerGridItem.tsx
index 622f91b..96890f4 100644
--- a/src/components/molecules/section_gird_view/SectionTopLayerGridItem.tsx
+++ b/src/components/molecules/section_gird_view/SectionTopLayerGridItem.tsx
@@ -3,8 +3,8 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import CellType from "../../../enum/CellType"; // js 파일, 값으로 사용
 import Color from "../../ui/Color";
-import CircleContainer from "../../atoms/main_title/CircleContainer";
-import MenuButton from "../../atoms/main_title/MenuButton";
+import CircleContainer from "../../atoms/colored_grid_view/CircleContainer";
+import MenuButton from "../../atoms/colored_grid_view/MenuButton";
 import NavigateArrow from "../../../assets/icon/navigate_arrow.svg?react";
 import TopLayerGridItemData from "@/types/TopLayerGridItemData";
 import SectionRoundedRectangleContainer from "@/components/atoms/section_grid_view/SectionRoundedRectangleContainer";
diff --git a/src/components/organisms/article_header/ArticleHedaer.tsx b/src/components/organisms/article_header/ArticleHedaer.tsx
deleted file mode 100644
index d97a600..0000000
--- a/src/components/organisms/article_header/ArticleHedaer.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import React, { useState, useEffect } from "react";
-import BottomLayerGridItem from "../../molecules/main_title/BottomLayerGridItem";
-import TopLayerGridItem from "../../molecules/main_title/TopLayerGridItem";
-import BottomLayerGridItemData from "@/types/BottomLayerGridItemData";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-import SectionTopGridItem from "@/components/molecules/section_gird_view/SectionTopLayerGridItem";
-import ArticleGridItem from "@/components/molecules/articel_header/ArticleGridItem";
-
-// ──────────────────────────────────────────────
-// 분리된 컨테이너 컴포넌트들
-// ──────────────────────────────────────────────
-
-interface LayeredContainerProps {
-  width: number;
-  height: number;
-  children: React.ReactNode;
-}
-const LayeredContainer: React.FC<LayeredContainerProps> = ({
-  width,
-  height,
-  children,
-}) => (
-  <div
-    className="relative"
-    style={{ width: `${width}px`, height: `${height}px` }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer1Props {
-  size: number;
-  padding: number;
-  colCount: number;
-  rowCount: number;
-  children: React.ReactNode;
-}
-const GridContainer1: React.FC<GridContainer1Props> = ({
-  size,
-  padding,
-  colCount,
-  rowCount,
-  children,
-}) => (
-  <div
-    className="grid absolute items-start"
-    style={{
-      gridTemplateColumns: `repeat(${colCount - 1}, ${size}px)`,
-      gridTemplateRows: `repeat(${rowCount - 1}, ${size}px)`,
-      top: `${padding}px`,
-      left: `${padding}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer2Props {
-  cellSize: number;
-  gap: number;
-  colCount: number;
-  rowCount: number;
-  children: React.ReactNode;
-}
-const GridContainer2: React.FC<GridContainer2Props> = ({
-  cellSize,
-  gap,
-  colCount,
-  rowCount,
-  children,
-}) => (
-  <div
-    className="grid absolute top-0 left-0 w-full h-full"
-    style={{
-      gridTemplateColumns: `repeat(${colCount}, ${cellSize}px)`,
-      gridTemplateRows: `repeat(${rowCount}, ${cellSize}px)`,
-      gap: `${gap}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-// ──────────────────────────────────────────────
-// ArticleHeader 컴포넌트
-// ──────────────────────────────────────────────
-
-interface ArticleHeaderProps {
-  width?: number | null;
-  rowCount: number;
-  colCount: number;
-  bottomLayerData: BottomLayerGridItemData[];
-  topLayerData: TopLayerGridItemData[];
-}
-
-const ArticleHeader: React.FC<ArticleHeaderProps> = ({
-  width,
-  rowCount,
-  colCount,
-  bottomLayerData,
-  topLayerData,
-}) => {
-  // rem 단위를 px로 변환하는 함수
-  const remToPx = (rem: number) => {
-    return (
-      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
-    );
-  };
-
-  // 동적 너비 계산 함수
-  const getDynamicWidth = () => {
-    const remValue = remToPx(6.0);
-    return Math.min(800, Math.max(700, window.innerWidth - remValue)); // 최대 800px로 제한
-  };
-
-  // 내부에서 관리하는 동적 너비 상태
-  const [dynamicWidth, setDynamicWidth] = useState<number>(getDynamicWidth());
-
-  useEffect(() => {
-    if (width !== null && width !== undefined) return;
-
-    const handleResize = () => {
-      setDynamicWidth(getDynamicWidth());
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, [width]);
-
-  // 실제 사용할 너비 결정
-  const finalWidth =
-    width !== null && width !== undefined ? width : dynamicWidth;
-
-  // 비율에 따른 사이즈 계산
-  const itemSize = (102 / 1248) * finalWidth;
-  const cornerCurveSize = (74 / 1248) * finalWidth;
-  const circleSize = (82 / 1248) * finalWidth;
-  const circleSize2X = (186 / 1248) * finalWidth;
-  const circleSize3X = (318 / 1248) * finalWidth;
-  const paddingSize = (41 / 1248) * finalWidth;
-  const gapSize = (24 / 1248) * finalWidth;
-  const containerHeight =
-    ((rowCount * 82 + (rowCount - 1) * 24) / 1248) * finalWidth;
-
-  // 상태: visibleItems와 isHovered
-  const [visibleItems, setVisibleItems] = useState<number[]>([]);
-  const [isHovered, setIsHovered] = useState<boolean[]>(
-    Array(topLayerData.length).fill(false)
-  );
-
-  useEffect(() => {
-    // TopLayerGridData에 delay 값이 있는 항목에 대해 visibleItems 상태 업데이트
-    topLayerData.forEach((data) => {
-      if (data.delay) {
-        setTimeout(() => {
-          setVisibleItems((prev) => [...prev, data.delay!]);
-        }, data.delay * 200);
-      }
-    });
-  }, []);
-
-  console.log(circleSize * colCount + gapSize * (colCount - 1));
-  const minWidth = 200;
-  const containerWidth = Math.max(
-    circleSize * colCount + gapSize * (colCount - 1),
-    minWidth
-  );
-
-  return (
-    <div className="flex">
-      <LayeredContainer width={containerWidth} height={containerHeight}>
-        <GridContainer1
-          padding={paddingSize}
-          size={itemSize}
-          colCount={colCount}
-          rowCount={rowCount}
-        >
-          {bottomLayerData.map((data, index) => (
-            <BottomLayerGridItem
-              key={index}
-              data={data}
-              itemSize={itemSize}
-              cornerCurveSize={cornerCurveSize}
-              isHovered={isHovered}
-            />
-          ))}
-        </GridContainer1>
-        <GridContainer2
-          cellSize={circleSize}
-          gap={gapSize}
-          colCount={colCount}
-          rowCount={rowCount}
-        >
-          {topLayerData.map((data, index) => (
-            <ArticleGridItem
-              key={index}
-              data={data}
-              circleSize={circleSize}
-              circleSize2X={circleSize2X}
-              circleSize3X={circleSize3X}
-              isHovered={isHovered}
-              visibleItems={visibleItems}
-            />
-          ))}
-        </GridContainer2>
-      </LayeredContainer>
-    </div>
-  );
-};
-
-export default ArticleHeader;
diff --git a/src/components/organisms/footer/Footer.tsx b/src/components/organisms/footer/Footer.tsx
index b222281..7043ae5 100644
--- a/src/components/organisms/footer/Footer.tsx
+++ b/src/components/organisms/footer/Footer.tsx
@@ -1,16 +1,43 @@
+import React from "react";
+import styled from "styled-components";
 import FooterLogo from "@/components/atoms/footer/FooterLogo";
 import FooterContactInfo from "@/components/molecules/footer/FooterContactInfo";
 
+const OuterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: #fffdf0;
+  padding-top: 15px;
+  padding-bottom: 16px;
+  margin-top: 40px;
+  margin-bottom: 20px;
+`;
+
+const InnerContainer = styled.div`
+  width: 100%;
+  max-width: 1000px;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 40px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
 const Footer: React.FC = () => {
   return (
-    <div className="flex justify-center items-center w-full bg-[#fffdf0] py-4 pt-15 mt-[40px] mb-[20px]">
-      <div className="w-full max-w-[1000px] px-6 flex flex-col  sm:flex-row justify-between items-start gap-10">
-        {/* 왼쪽: 로고 */}
+    <OuterContainer>
+      <InnerContainer>
         <FooterLogo />
-        {/* 오른쪽: 연락처 정보 */}
         <FooterContactInfo />
-      </div>
-    </div>
+      </InnerContainer>
+    </OuterContainer>
   );
 };
 
diff --git a/src/components/organisms/header/Header.tsx b/src/components/organisms/header/Header.tsx
index e7287ce..14cc240 100644
--- a/src/components/organisms/header/Header.tsx
+++ b/src/components/organisms/header/Header.tsx
@@ -1,12 +1,30 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
 import DesktopHeader from "@/components/molecules/header/DesktopHeader";
-import TabletHeader from "../../molecules/header/TabletHeader";
+import TabletHeader from "@/components/molecules/header/TabletHeader";
+
+const HeaderContainer = styled.header`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
 
 const Header: React.FC = () => {
+  const [isDesktop, setIsDesktop] = useState<boolean>(window.innerWidth > 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth > 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
-    <header className="w-full justify-center">
-      <DesktopHeader />
-      <TabletHeader />
-    </header>
+    <HeaderContainer>
+      {isDesktop ? <DesktopHeader /> : <TabletHeader />}
+    </HeaderContainer>
   );
 };
 
diff --git a/src/components/organisms/main_title/MainMobileTitle.tsx b/src/components/organisms/main_title/MainMobileTitle.tsx
deleted file mode 100644
index 35f016a..0000000
--- a/src/components/organisms/main_title/MainMobileTitle.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, { useState, useEffect } from "react";
-import BottomLayerGridItem from "../../molecules/main_title/BottomLayerGridItem";
-import TopLayerGridItem from "../../molecules/main_title/TopLayerGridItem";
-import TopLayerGridData from "@/constants/data/main_title/TopLayerGridData";
-import BottomLayerGridData from "@/constants/data/main_title/BottomLayerGridData";
-import MobileTopLayerGridData from "@/constants/data/main_mobile_title/MobileTopLayerGridData";
-import MobileBottomLayerGridData from "@/constants/data/main_mobile_title/MobileBottomLayerGridData";
-import MobileTopLayerGridItem from "@/components/molecules/main_title/MobileTopLayerGridItem";
-
-// ──────────────────────────────────────────────
-// 분리된 컨테이너 컴포넌트들
-// ──────────────────────────────────────────────
-
-interface LayeredContainerProps {
-  width: number;
-  height: number;
-  children: React.ReactNode;
-}
-const LayeredContainer: React.FC<LayeredContainerProps> = ({
-  width,
-  height,
-  children,
-}) => (
-  <div
-    className="relative"
-    style={{ width: `${width}px`, height: `${height}px` }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer1Props {
-  size: number;
-  padding: number;
-  children: React.ReactNode;
-}
-const GridContainer1: React.FC<GridContainer1Props> = ({
-  size,
-  padding,
-  children,
-}) => (
-  <div
-    className="grid absolute items-start"
-    style={{
-      gridTemplateColumns: `repeat(5, ${size}px)`,
-      gridTemplateRows: `repeat(9, ${size}px)`,
-      top: `${padding}px`,
-      left: `${padding}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer2Props {
-  cellSize: number;
-  gap: number;
-  children: React.ReactNode;
-}
-const GridContainer2: React.FC<GridContainer2Props> = ({
-  cellSize,
-  gap,
-  children,
-}) => (
-  <div
-    className="grid absolute top-0 left-0 w-full h-full"
-    style={{
-      gridTemplateColumns: `repeat(6, ${cellSize}px)`,
-      gridTemplateRows: `repeat(10, ${cellSize}px)`,
-      gap: `${gap}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-// ──────────────────────────────────────────────
-// MainMobileTitle 컴포넌트
-// ──────────────────────────────────────────────
-
-interface MainMobileTitleProps {
-  width?: number | null;
-}
-
-const MainMobileTitle: React.FC<MainMobileTitleProps> = ({ width }) => {
-  // rem 단위를 px로 변환하는 함수
-  const remToPx = (rem: number) => {
-    return (
-      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
-    );
-  };
-
-  // 동적 너비 계산 함수
-  const getDynamicWidth = () => {
-    const remValue = remToPx(6.0);
-    return Math.min(1000, Math.max(200, window.innerWidth - remValue));
-  };
-
-  // 내부에서 관리하는 동적 너비 상태
-  const [dynamicWidth, setDynamicWidth] = useState<number>(getDynamicWidth());
-
-  useEffect(() => {
-    if (width !== null && width !== undefined) return;
-
-    const handleResize = () => {
-      setDynamicWidth(getDynamicWidth());
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, [width]);
-
-  // 실제 사용할 너비 결정
-  const finalWidth =
-    width !== null && width !== undefined ? width : dynamicWidth;
-
-  // 비율에 따른 사이즈 계산
-  const itemSize = (128 / 740) * finalWidth;
-  const cornerCurveSize = (78 / 740) * finalWidth;
-  const circleSize = (100 / 740) * finalWidth;
-  const circleSize2X = (228 / 740) * finalWidth;
-  const circleSize3X = (356 / 740) * finalWidth;
-  const paddingSize = (50 / 740) * finalWidth;
-  const gapSize = (28 / 740) * finalWidth;
-  const containerHeight = (1252 / 740) * finalWidth;
-
-  // 상태: visibleItems와 isHovered
-  const [visibleItems, setVisibleItems] = useState<number[]>([]);
-  const [isHovered, setIsHovered] = useState<boolean[]>([
-    false,
-    false,
-    false,
-    false,
-  ]);
-
-  useEffect(() => {
-    // TopLayerGridData에 delay 값이 있는 항목에 대해 visibleItems 상태 업데이트
-    MobileTopLayerGridData.forEach((data) => {
-      if (data.delay) {
-        setTimeout(() => {
-          if (data.delay !== undefined) {
-            setVisibleItems((prev) => [...prev, data.delay!]);
-          }
-        }, data.delay * 200);
-      }
-    });
-  }, []);
-
-  const handleMouseEnter = (index: number) => {
-    setIsHovered((prev) => {
-      const newHovered = [...prev];
-      newHovered[index] = true;
-      return newHovered;
-    });
-  };
-
-  const handleMouseLeave = (index: number) => {
-    setIsHovered((prev) => {
-      const newHovered = [...prev];
-      newHovered[index] = false;
-      return newHovered;
-    });
-  };
-
-  return (
-    <LayeredContainer width={finalWidth} height={containerHeight}>
-      <GridContainer1 padding={paddingSize} size={itemSize}>
-        {MobileBottomLayerGridData.map((data, index) => (
-          <BottomLayerGridItem
-            key={index}
-            data={data}
-            itemSize={itemSize}
-            cornerCurveSize={cornerCurveSize}
-            isHovered={isHovered}
-          />
-        ))}
-      </GridContainer1>
-      <GridContainer2 cellSize={circleSize} gap={gapSize}>
-        {MobileTopLayerGridData.map((data, index) => (
-          <MobileTopLayerGridItem
-            key={index}
-            data={data}
-            circleSize={circleSize}
-            circleSize2X={circleSize2X}
-            circleSize3X={circleSize3X}
-            isHovered={isHovered}
-            handleMouseEnter={handleMouseEnter}
-            handleMouseLeave={handleMouseLeave}
-            visibleItems={visibleItems}
-          />
-        ))}
-      </GridContainer2>
-    </LayeredContainer>
-  );
-};
-
-export default MainMobileTitle;
diff --git a/src/components/organisms/main_title/MainTitle.tsx b/src/components/organisms/main_title/MainTitle.tsx
deleted file mode 100644
index 51921d5..0000000
--- a/src/components/organisms/main_title/MainTitle.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import React, { useState, useEffect } from "react";
-import BottomLayerGridItem from "../../molecules/main_title/BottomLayerGridItem";
-import TopLayerGridItem from "../../molecules/main_title/TopLayerGridItem";
-import TopLayerGridData from "@/constants/data/main_title/TopLayerGridData";
-import BottomLayerGridData from "@/constants/data/main_title/BottomLayerGridData";
-
-// ──────────────────────────────────────────────
-// 분리된 컨테이너 컴포넌트들
-// ──────────────────────────────────────────────
-
-interface LayeredContainerProps {
-  width: number;
-  height: number;
-  children: React.ReactNode;
-}
-const LayeredContainer: React.FC<LayeredContainerProps> = ({
-  width,
-  height,
-  children,
-}) => (
-  <div
-    className="relative"
-    style={{ width: `${width}px`, height: `${height}px` }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer1Props {
-  size: number;
-  padding: number;
-  children: React.ReactNode;
-}
-const GridContainer1: React.FC<GridContainer1Props> = ({
-  size,
-  padding,
-  children,
-}) => (
-  <div
-    className="grid absolute items-start"
-    style={{
-      gridTemplateColumns: `repeat(9, ${size}px)`,
-      gridTemplateRows: `repeat(5, ${size}px)`,
-      top: `${padding}px`,
-      left: `${padding}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-interface GridContainer2Props {
-  cellSize: number;
-  gap: number;
-  children: React.ReactNode;
-}
-const GridContainer2: React.FC<GridContainer2Props> = ({
-  cellSize,
-  gap,
-  children,
-}) => (
-  <div
-    className="grid absolute top-0 left-0 w-full h-full"
-    style={{
-      gridTemplateColumns: `repeat(10, ${cellSize}px)`,
-      gridTemplateRows: `repeat(6, ${cellSize}px)`,
-      gap: `${gap}px`,
-    }}
-  >
-    {children}
-  </div>
-);
-
-// ──────────────────────────────────────────────
-// MainTitle 컴포넌트
-// ──────────────────────────────────────────────
-
-interface MainTitleProps {
-  width?: number | null;
-}
-
-const MainTitle: React.FC<MainTitleProps> = ({ width }) => {
-  // rem 단위를 px로 변환하는 함수
-  const remToPx = (rem: number) => {
-    return (
-      rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
-    );
-  };
-
-  // 동적 너비 계산 함수
-  const getDynamicWidth = () => {
-    const remValue = remToPx(6.0);
-    return Math.min(1000, Math.max(200, window.innerWidth - remValue));
-  };
-
-  // 내부에서 관리하는 동적 너비 상태
-  const [dynamicWidth, setDynamicWidth] = useState<number>(getDynamicWidth());
-
-  useEffect(() => {
-    if (width !== null && width !== undefined) return;
-
-    const handleResize = () => {
-      setDynamicWidth(getDynamicWidth());
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, [width]);
-
-  // 실제 사용할 너비 결정
-  const finalWidth =
-    width !== null && width !== undefined ? width : dynamicWidth;
-
-  // 비율에 따른 사이즈 계산
-  const itemSize = (128 / 1252) * finalWidth;
-  const cornerCurveSize = (78 / 1252) * finalWidth;
-  const circleSize = (100 / 1252) * finalWidth;
-  const circleSize2X = (228 / 1252) * finalWidth;
-  const circleSize3X = (356 / 1252) * finalWidth;
-  const paddingSize = (50 / 1252) * finalWidth;
-  const gapSize = (28 / 1252) * finalWidth;
-  const containerHeight = (740 / 1252) * finalWidth;
-
-  // 상태: visibleItems와 isHovered
-  const [visibleItems, setVisibleItems] = useState<number[]>([]);
-  const [isHovered, setIsHovered] = useState<boolean[]>([
-    false,
-    false,
-    false,
-    false,
-  ]);
-
-  useEffect(() => {
-    // TopLayerGridData에 delay 값이 있는 항목에 대해 visibleItems 상태 업데이트
-    TopLayerGridData.forEach((data) => {
-      if (data.delay) {
-        setTimeout(() => {
-          if (data.delay !== undefined) {
-            setVisibleItems((prev) => [...prev, data.delay!]);
-          }
-        }, data.delay * 200);
-      }
-    });
-  }, []);
-
-  const handleMouseEnter = (index: number) => {
-    setIsHovered((prev) => {
-      const newHovered = [...prev];
-      newHovered[index] = true;
-      return newHovered;
-    });
-  };
-
-  const handleMouseLeave = (index: number) => {
-    setIsHovered((prev) => {
-      const newHovered = [...prev];
-      newHovered[index] = false;
-      return newHovered;
-    });
-  };
-
-  return (
-    <LayeredContainer width={finalWidth} height={containerHeight}>
-      <GridContainer1 padding={paddingSize} size={itemSize}>
-        {BottomLayerGridData.map((data, index) => (
-          <BottomLayerGridItem
-            key={index}
-            data={data}
-            itemSize={itemSize}
-            cornerCurveSize={cornerCurveSize}
-            isHovered={isHovered}
-          />
-        ))}
-      </GridContainer1>
-      <GridContainer2 cellSize={circleSize} gap={gapSize}>
-        {TopLayerGridData.map((data, index) => (
-          <TopLayerGridItem
-            key={index}
-            data={data}
-            circleSize={circleSize}
-            circleSize2X={circleSize2X}
-            circleSize3X={circleSize3X}
-            isHovered={isHovered}
-            handleMouseEnter={handleMouseEnter}
-            handleMouseLeave={handleMouseLeave}
-            visibleItems={visibleItems}
-          />
-        ))}
-      </GridContainer2>
-    </LayeredContainer>
-  );
-};
-
-export default MainTitle;
diff --git a/src/components/organisms/section/SectionGridView.tsx b/src/components/organisms/section/SectionGridView.tsx
index 8cc760f..45fb137 100644
--- a/src/components/organisms/section/SectionGridView.tsx
+++ b/src/components/organisms/section/SectionGridView.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import BottomLayerGridItem from "../../molecules/main_title/BottomLayerGridItem";
-import TopLayerGridItem from "../../molecules/main_title/TopLayerGridItem";
+import BottomLayerGridItem from "@/components/molecules/colored_grid_view/BottomLayerGridItem";
+import TopLayerGridItem from "@/components/molecules/colored_grid_view/TopLayerGridItem";
 import BottomLayerGridItemData from "@/types/BottomLayerGridItemData";
 import TopLayerGridItemData from "@/types/TopLayerGridItemData";
 import SectionTopGridItem from "@/components/molecules/section_gird_view/SectionTopLayerGridItem";
diff --git a/src/components/page/ActivityPage.jsx b/src/components/page/ActivityPage.jsx
index 1c041ce..21555b7 100644
--- a/src/components/page/ActivityPage.jsx
+++ b/src/components/page/ActivityPage.jsx
@@ -1,13 +1,7 @@
-import ActivityHeader from "../blocks/ActivityHeader";
-import HiconnectIntro from "../blocks/HiconnectIntro";
-import HitingIntro from "../blocks/HitingIntro";
 import ActiviySection from "../blocks/ActivitySection";
-import ICPCIntro from "../blocks/ActivitySection";
 import Label from "../ui/Label";
 import Layout from "../templates/PageTemplate";
-import React from "react";
 import styled, { keyframes } from "styled-components";
-import ArticleHeader from "../organisms/article_header/ArticleHedaer";
 
 const fadeIn = keyframes`
   from {
@@ -29,9 +23,7 @@ const AnimatedContainer = styled.div`
 const ActivityPage = () => {
   return (
     <Layout align="top">
-      <AnimatedContainer delay="0s">
-        <ArticleHeader />
-      </AnimatedContainer>
+      <AnimatedContainer delay="0s"></AnimatedContainer>
 
       <AnimatedContainer delay="0.5s">
         <ActiviySection
diff --git a/src/components/page/HomePage.tsx b/src/components/page/HomePage.tsx
index 9638ed5..bcd6e8f 100644
--- a/src/components/page/HomePage.tsx
+++ b/src/components/page/HomePage.tsx
@@ -1,17 +1,42 @@
 import Layout from "../templates/PageTemplate";
-import MainTitle from "../organisms/main_title/MainTitle";
-import MainMobileTitle from "../organisms/main_title/MainMobileTitle";
+import TopLayerGridData from "@/constants/data/main_title/TopLayerGridData";
+import BottomLayerGridData from "@/constants/data/main_title/BottomLayerGridData";
+import MobileBottomLayerGridData from "@/constants/data/main_mobile_title/MobileBottomLayerGridData";
+import MobileTopLayerGridData from "@/constants/data/main_mobile_title/MobileTopLayerGridData";
+import styled from "styled-components";
+import ColoredGridView from "../organisms/colored_grid_view/ColoredGridView";
+
+const DesktopContainer = styled.div`
+  @media (max-width: 640px) {
+    display: none;
+  }
+`;
+
+const MobileContainer = styled.div`
+  @media (min-width: 641px) {
+    display: none;
+  }
+`;
 
 const HomePage = () => {
   return (
-    <Layout align="center">
-      {/* xs 사이즈 이하에서는 모바일 타이틀, xs 이상에서는 일반 타이틀을 보여줍니다. */}
-      <div className="block xs:hidden">
-        <MainMobileTitle />
-      </div>
-      <div className="hidden xs:block">
-        <MainTitle />
-      </div>
+    <Layout>
+      <MobileContainer>
+        <ColoredGridView
+          rowCount={10}
+          colCount={6}
+          bottomLayerGridData={MobileBottomLayerGridData}
+          topLayerGridData={MobileTopLayerGridData}
+        />
+      </MobileContainer>
+      <DesktopContainer>
+        <ColoredGridView
+          rowCount={6}
+          colCount={10}
+          bottomLayerGridData={BottomLayerGridData}
+          topLayerGridData={TopLayerGridData}
+        />
+      </DesktopContainer>
     </Layout>
   );
 };
diff --git a/src/components/page/IntroduceHiarcPage.jsx b/src/components/page/IntroduceHiarcPage.jsx
deleted file mode 100644
index 9cae313..0000000
--- a/src/components/page/IntroduceHiarcPage.jsx
+++ /dev/null
@@ -1,96 +0,0 @@
-// src/components/IntroduceHiarcPage.tsx
-import Layout from "../templates/PageTemplate";
-import Label from "../ui/Label";
-import styled, { keyframes } from "styled-components";
-import logo from "../../assets/hiarc-logo.png";
-import SectionTemplate from "../templates/SectionTemplate";
-import IntroduceHiarcBottom from "@/constants/data/introduce_hiarc/IntroduceHiarcBottom";
-import IntroduceHiarcTop from "@/constants/data/introduce_hiarc/IntroduceHiarcTop";
-import ContestIntroduceBottom from "@/constants/data/introduce_hiarc/ContestIntroduceBottom";
-import ContestIntroduceTop from "@/constants/data/introduce_hiarc/ContestIntroduceTop";
-import AssetImage from "../atoms/image/AssetImage";
-import ICPCIntroduceTop from "@/constants/data/introduce_hiarc/ICPCIntroduceTop";
-import HiarcCompetition from "../ui/HiarcCompetition";
-
-// 페이드 인 애니메이션 정의
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-
-// 애니메이션이 적용된 래퍼 스타일
-const AnimatedContainer = styled.div`
-  opacity: 0;
-  animation: ${fadeIn} 1s ease-in-out forwards;
-  animation-delay: ${(props) => props.delay || "0s"};
-`;
-
-const IntroduceHiarcPage = () => {
-  return (
-    <Layout>
-      <AnimatedContainer delay="0s">
-        <SectionTemplate
-          rowCount={2}
-          colCount={3}
-          topLayerData={IntroduceHiarcTop}
-          bottomLayerData={IntroduceHiarcBottom}
-          contentText={Label.academyIntroduce}
-        />
-      </AnimatedContainer>
-
-      <AnimatedContainer delay="0.5s">
-        <AssetImage
-          src={logo}
-          alt="하이아크 소개 이미지"
-          padding={"py-10"}
-          caption="@ 제 1회 하이콘 대회 배경"
-        />
-      </AnimatedContainer>
-
-      <AnimatedContainer delay="1s">
-        <SectionTemplate
-          align="right"
-          rowCount={3}
-          colCount={3}
-          topLayerData={ContestIntroduceTop}
-          bottomLayerData={ContestIntroduceBottom}
-          contentText={Label.contestIntroduce}
-          showToggle={true}
-          toggleText="대회 자세히 알아보기"
-        >
-          <ul className="list-none pl-10 text-[clamp(14px,2vw,18px)] font-NanumSquareNeo mb-2">
-            {HiarcCompetition.map((item, index) => (
-              <li key={index}>{item}</li>
-            ))}
-          </ul>
-        </SectionTemplate>
-      </AnimatedContainer>
-
-      {/* 세 번째 이미지와 텍스트 */}
-      <AnimatedContainer delay="1.5s">
-        <SectionTemplate
-          align="right"
-          rowCount={1}
-          colCount={3}
-          topLayerData={ICPCIntroduceTop}
-          bottomLayerData={[]}
-          contentText={Label.ICPCIntroduce}
-          showToggle={true}
-          toggleText="ICPC 신촌 자세히 알아보기"
-        >
-          <p className="text-[clamp(14px,2vw,18px)] font-NanumSquareNeo mb-2">
-            {Label.DetailSinchon}
-          </p>
-        </SectionTemplate>
-      </AnimatedContainer>
-    </Layout>
-  );
-};
-
-export default IntroduceHiarcPage;
diff --git a/src/components/templates/PageTemplate.tsx b/src/components/templates/PageTemplate.tsx
index 48a05b5..533cadd 100644
--- a/src/components/templates/PageTemplate.tsx
+++ b/src/components/templates/PageTemplate.tsx
@@ -1,44 +1,66 @@
 import React, { ReactNode } from "react";
+import styled from "styled-components";
 import Header from "@/components/organisms/header/Header";
 import Footer from "@/components/organisms/footer/Footer";
 
 interface PageTemplateProps {
   children: ReactNode;
-  align?: "center" | "top"; // 정렬 옵션 추가
+  align?: "center" | "top";
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+`;
+
+const HeaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const MainContent = styled.main<{ align: "center" | "top" }>`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-self: center;
+  width: 100%;
+  max-width: 1000px;
+  padding: 0 1rem;
+  ${(props) =>
+    props.align === "center"
+      ? `
+    align-items: center;
+    justify-content: center;
+  `
+      : `
+    align-items: flex-start;
+    justify-content: flex-start;
+  `}
+`;
+
+const FooterContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
 const PageTemplate: React.FC<PageTemplateProps> = ({
   children,
   align = "center",
 }) => {
   return (
-    <div className="flex flex-col w-full min-h-screen">
-      {/* 헤더 (가운데 정렬) */}
-      <div className="w-full flex justify-center">
+    <Container>
+      <HeaderContainer>
         <Header />
-      </div>
-
-      {/* 메인 콘텐츠 (정렬 방식 결정) */}
-      <main
-        className={`
-          flex
-          flex-col
-          flex-grow
-          self-center
-          w-full
-          max-w-[1000px]
-          px-4
-          ${align === "center" ? "items-center justify-center" : "items-start justify-start"}
-        `}
-      >
-        {children}
-      </main>
-
-      {/* 푸터 (가운데 정렬) */}
-      <div className="w-full flex justify-center">
+      </HeaderContainer>
+      <MainContent align={align}>{children}</MainContent>
+      <FooterContainer>
         <Footer />
-      </div>
-    </div>
+      </FooterContainer>
+    </Container>
   );
 };
 
diff --git a/src/components/templates/SectionTemplate.tsx b/src/components/templates/SectionTemplate.tsx
index b9bea9f..fe43dd3 100644
--- a/src/components/templates/SectionTemplate.tsx
+++ b/src/components/templates/SectionTemplate.tsx
@@ -1,6 +1,10 @@
 import React, { useState } from "react";
-import SectionGridView from "../organisms/section/SectionGridView";
+import styled from "styled-components";
 import ToggleIcon from "@/assets/icon/toggle_icon.svg?react";
+import ColoredGridView from "../organisms/colored_grid_view/ColoredGridView";
+import FontStyle from "../ui/FontStyle";
+import Color from "../ui/Color";
+import ContentText from "../atoms/text/ContentText";
 
 interface SectionTemplateProps {
   colCount: number;
@@ -14,6 +18,62 @@ interface SectionTemplateProps {
   children?: React.ReactNode;
 }
 
+const SectionContainer = styled.section<{ align: "left" | "right" }>`
+  display: flex;
+  width: 100%;
+  gap: 24px;
+  padding-top: 54px;
+
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: 640px) {
+    flex-direction: ${({ align }) =>
+      align === "right" ? "row-reverse" : "row"};
+    align-items: flex-start;
+  }
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const ToggleButton = styled.button`
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+
+const ToggleIconStyled = styled(ToggleIcon)<{ isOpen: boolean }>`
+  transition: transform 0.3s;
+  transform: ${({ isOpen }) => (isOpen ? "rotate(-90deg)" : "rotate(0deg)")};
+  width: clamp(12px, 5vw, 24px);
+  height: clamp(12px, 5vw, 24px);
+`;
+
+const ToggleText = styled.span`
+  ${FontStyle.display1ExtraBold}
+  font-size: clamp(14px, 2vw, 18px);
+  margin-left: 8px;
+  color: ${Color.primary};
+`;
+
+const ToggleContent = styled.div<{ isOpen: boolean }>`
+  transition:
+    max-height 0.3s,
+    opacity 0.3s;
+  overflow: hidden;
+  max-height: ${({ isOpen }) => (isOpen ? "1000px" : "0")};
+  opacity: ${({ isOpen }) => (isOpen ? "1" : "0")};
+
+  text-align: left;
+  line-height: 1.5;
+`;
+
 const SectionTemplate: React.FC<SectionTemplateProps> = ({
   colCount,
   rowCount,
@@ -28,63 +88,31 @@ const SectionTemplate: React.FC<SectionTemplateProps> = ({
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <section
-      className={`flex w-full gap-8 pt-16 flex-col items-center ${
-        align === "right"
-          ? "sm:flex-row-reverse sm:items-start"
-          : "sm:flex-row sm:items-start"
-      }`}
-    >
-      {/* 그리드 뷰 */}
-      <div className="flex-1">
-        <SectionGridView
+    <SectionContainer align={align}>
+      <div style={{ display: "flex" }}>
+        <ColoredGridView
+          maxWidth={250}
+          minWidth={150}
           rowCount={rowCount}
           colCount={colCount}
-          bottomLayerData={bottomLayerData}
-          topLayerData={topLayerData}
+          bottomLayerGridData={bottomLayerData}
+          topLayerGridData={topLayerData}
         />
       </div>
-
-      {/* 오른쪽 컨텐츠 */}
-      <div className="flex flex-col">
-        <p className="text-[clamp(14px,2vw,18px)] font-NanumSquareNeo mb-2">
-          {contentText}
-        </p>
-
-        {/* ✅ showToggle이 true일 때만 토글 버튼 표시 */}
+      <ContentContainer>
+        <ContentText text={contentText}></ContentText>
         {showToggle && (
-          <button
-            className="flex items-center p-3 border-none"
+          <ToggleButton
             onClick={() => setIsOpen(!isOpen)}
             aria-expanded={isOpen}
           >
-            <ToggleIcon
-              className={`transition-transform duration-300 ${
-                isOpen ? "rotate-90" : "rotate-0"
-              }`}
-              width="clamp(12px, 5vw, 24px)"
-              height="clamp(12px, 5vw, 24px)"
-            />
-            <span className="text-[clamp(14px,2vw,18px)] font-NanumSquareNeoExtraBold font-extrabold text-primary pl-2">
-              {toggleText}
-            </span>
-          </button>
+            <ToggleIconStyled isOpen={isOpen} />
+            <ToggleText>{toggleText}</ToggleText>
+          </ToggleButton>
         )}
-
-        {/* 토글이 있는 경우 isOpen에 따라 children 표시, 없는 경우 항상 표시 */}
-        <div
-          className={`transition-all overflow-hidden ${
-            showToggle
-              ? isOpen
-                ? "max-h-full opacity-100 py-2"
-                : "max-h-0 opacity-0"
-              : "max-h-full opacity-100 py-2"
-          }`}
-        >
-          {children}
-        </div>
-      </div>
-    </section>
+        <ToggleContent isOpen={isOpen || !showToggle}>{children}</ToggleContent>
+      </ContentContainer>
+    </SectionContainer>
   );
 };
 
diff --git a/src/components/ui/Label.jsx b/src/components/ui/Label.jsx
index 29a3d81..953a545 100644
--- a/src/components/ui/Label.jsx
+++ b/src/components/ui/Label.jsx
@@ -1,8 +1,8 @@
 const Label = {
   academyIntroduce:
-    "HI_ARC(Hongik_Algorithm Research Club, 하이아크)는 2017년부터 이어져 내려온 홍익대학교 컴퓨터공학과 소속 알고리즘 학회입니다. 학회원들의 문제해결력및 PS(Problem Solving) 실력 향상을 위해 난이도별 스터디와 다양한 활동이 마련되어 있습니다. 또한 학회원들의 실전경험을 심어주고 CP (Competitive Programming) 수준을 올리기 위해 ICPC, UCPC와 같은 크고 작은 대회를 준비하고 있습니다.",
+    "-HI_ARC(Hongik_Algorithm Research Club, 하이아크)-는 2017년부터 이어져 내려온 홍익대학교 컴퓨터공학과 소속 알고리즘 학회입니다. 학회원들의 문제해결력및 PS(Problem Solving) -실력 향상을 위해 난이도별 스터디와 다양한 활동-이 마련되어 있습니다. 또한 학회원들의 실전경험을 심어주고 CP (Competitive Programming) 수준을 올리기 위해 -ICPC-, -UCPC-와 같은 크고 작은 대회를 준비하고 있습니다.",
   contestIntroduce:
-    "하이아크는 2017년 창립 이후 꾸준히 교내 프로그래밍 경진대회를 주최하고 있습니다. 각 분야에서 뛰어난 알고리즘 실력자들을 섭외하여 독창적이고 도전적인 문제를 제공합니다. 또한, 신뢰할 수 있는 검수진을 통해 문제의 완성도를 높이고, 이를 통해 학회원들의 문제 해결 능력을 향상 시키는 데 기여하고 있습니다. 이 대회는 단순한 경쟁을 넘어, 학생들이 프로그래밍 실력을 한 단계 더 발전시킬 수 있는 소중한 기회가 되고 있습니다.",
+    "하이아크는 2017년 창립 이후 꾸준히 -교내 프로그래밍 경진대회-를 주최하고 있습니다. 각 분야에서 뛰어난 알고리즘 실력자들을 섭외하여 독창적이고 도전적인 문제를 제공합니다. 또한, 신뢰할 수 있는 검수진을 통해 문제의 완성도를 높이고, 이를 통해 학회원들의 문제 해결 능력을 향상 시키는 데 기여하고 있습니다. 이 대회는 단순한 경쟁을 넘어, 학생들이 프로그래밍 실력을 한 단계 더 발전시킬 수 있는 소중한 기회가 되고 있습니다.",
   HiconnectIntroduce:
     "하이아크에 참여했던 선배님들과 학회원들이 한자리에 모여 선후배 간의 네트워킹을 도모하는 행사입니다. 이 자리에서는 선배님들께 알고리즘 학습, 학교 생활, 보안, 금융 분야에 관한 실제 경험담을 들을 수 있으며 이로 인해 학회원들은 선배님들의 경험과 더불어 더 넓은 시야와 정보를 가져갈 수 있습니다.",
   ICPCIntroduce:
diff --git a/src/constants/data/introduce_hiarc/ContestIntroduceBottom.ts b/src/constants/data/introduce_hiarc/ContestIntroduceBottom.ts
deleted file mode 100644
index 270c3ee..0000000
--- a/src/constants/data/introduce_hiarc/ContestIntroduceBottom.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import Color from "@/components/ui/Color";
-import CellType from "@/enum/CellType";
-import CurvedCornerType from "@/enum/CurevedCornerType";
-import BottomLayerGridItemData from "@/types/BottomLayerGridItemData";
-
-const ContestIntroduceBottom: BottomLayerGridItemData[] = [
-  {
-    position: [2, 1],
-    type: CellType.CURVE,
-    direction: CurvedCornerType.TOP_LEFT,
-    backgroundColor: Color.primary,
-  },
-  {
-    position: [2, 2],
-    type: CellType.CURVE,
-    direction: CurvedCornerType.TOP_LEFT,
-    backgroundColor: Color.gray,
-  },
-  {
-    position: [1, 2],
-    type: CellType.CURVE,
-    direction: CurvedCornerType.TOP_LEFT,
-    backgroundColor: Color.gray,
-  },
-];
-
-export default ContestIntroduceBottom;
diff --git a/src/constants/data/introduce_hiarc/ContestIntroduceTop.ts b/src/constants/data/introduce_hiarc/ContestIntroduceTop.ts
deleted file mode 100644
index 5bdda76..0000000
--- a/src/constants/data/introduce_hiarc/ContestIntroduceTop.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// src/constants/data/main_title/ContestIntroduceTop.ts
-import Color from "@/components/ui/Color";
-import CellType from "@/enum/CellType";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-
-const ContestIntroduceTop: TopLayerGridItemData[] = [
-  {
-    position: [1, 1],
-    type: CellType.HORIZONTAL_RECTANGLE,
-    color: Color.primary,
-    text: "대회 주최",
-  },
-  {
-    position: [3, 1],
-    type: CellType.CIRCLE,
-    color: Color.gray,
-  },
-  { position: [1, 2], type: CellType.CIRCLE, color: Color.gray },
-  { position: [2, 2], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 2], type: CellType.CIRCLE, color: Color.primary },
-  { position: [1, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [2, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 3], type: CellType.CIRCLE, color: Color.gray },
-];
-
-export default ContestIntroduceTop;
diff --git a/src/constants/data/introduce_hiarc/ICPCIntroduceTop.ts b/src/constants/data/introduce_hiarc/ICPCIntroduceTop.ts
deleted file mode 100644
index b02bcff..0000000
--- a/src/constants/data/introduce_hiarc/ICPCIntroduceTop.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// src/constants/data/main_title/ICPCIntroduceTop.ts
-import Color from "@/components/ui/Color";
-import CellType from "@/enum/CellType";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-
-const ICPCIntroduceTop: TopLayerGridItemData[] = [
-  {
-    position: [1, 1],
-    type: CellType.LONG_HORIZONTAL_RECTANGLE,
-    color: Color.primary,
-    text: "ICPC 신촌",
-  },
-];
-
-export default ICPCIntroduceTop;
diff --git a/src/constants/data/introduce_hiarc/IntroduceHiarcBottom.ts b/src/constants/data/introduce_hiarc/IntroduceHiarcBottom.ts
deleted file mode 100644
index 177270f..0000000
--- a/src/constants/data/introduce_hiarc/IntroduceHiarcBottom.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Color from "@/components/ui/Color";
-import CellType from "@/enum/CellType";
-import CurvedCornerType from "@/enum/CurevedCornerType";
-import BottomLayerGridItemData from "@/types/BottomLayerGridItemData";
-
-const IntroduceHiarcBottom: BottomLayerGridItemData[] = [
-  {
-    position: [1, 1],
-    type: CellType.CURVE,
-    direction: CurvedCornerType.TOP_RIGHT,
-    backgroundColor: Color.yellow,
-  },
-];
-
-export default IntroduceHiarcBottom;
diff --git a/src/constants/data/introduce_hiarc/IntroduceHiarcTop.ts b/src/constants/data/introduce_hiarc/IntroduceHiarcTop.ts
deleted file mode 100644
index d092992..0000000
--- a/src/constants/data/introduce_hiarc/IntroduceHiarcTop.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// src/constants/data/main_title/IntroduceHiarcTop.ts
-import Color from "@/components/ui/Color";
-import CellType from "@/enum/CellType";
-import TopLayerGridItemData from "@/types/TopLayerGridItemData";
-
-const IntroduceHiarcTop: TopLayerGridItemData[] = [
-  { position: [1, 1], type: CellType.CIRCLE, color: Color.gray },
-  {
-    position: [2, 1],
-    type: CellType.HORIZONTAL_RECTANGLE,
-    color: Color.yellow,
-    text: "학회 소개",
-  },
-  { position: [1, 2], type: CellType.CIRCLE, color: Color.yellow },
-  { position: [2, 2], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 2], type: CellType.CIRCLE, color: Color.gray },
-];
-
-export default IntroduceHiarcTop;
diff --git a/src/constants/data/main_mobile_title/MobileTopLayerGridData.ts b/src/constants/data/main_mobile_title/MobileTopLayerGridData.ts
index 97e12a2..2dddef3 100644
--- a/src/constants/data/main_mobile_title/MobileTopLayerGridData.ts
+++ b/src/constants/data/main_mobile_title/MobileTopLayerGridData.ts
@@ -4,68 +4,76 @@ import CellType from "@/enum/CellType";
 import TopLayerGridItemData from "@/types/TopLayerGridItemData";
 
 const MobileTopLayerGridData: TopLayerGridItemData[] = [
-  { position: [1, 1], type: CellType.CIRCLE, color: Color.pink },
-  { position: [2, 1], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 1], type: CellType.HORIZONTAL_RECTANGLE, color: Color.gray },
-  { position: [5, 1], type: CellType.CIRCLE, color: Color.orange },
-  { position: [6, 1], type: CellType.CIRCLE, color: Color.orange },
+  { position: [1, 1], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [2, 1], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  {
+    position: [3, 1],
+    type: CellType.HORIZONTAL_RECTANGLE,
+    backgroundColor: Color.gray,
+  },
+  { position: [5, 1], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [6, 1], type: CellType.CIRCLE, backgroundColor: Color.orange },
 
-  { position: [1, 2], type: CellType.CIRCLE, color: Color.pink },
-  { position: [2, 2], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 2], type: CellType.VERTICAL_RECTANGLE, color: Color.orange },
-  { position: [6, 2], type: CellType.CIRCLE, color: Color.orange },
+  { position: [1, 2], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [2, 2], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  {
+    position: [3, 2],
+    type: CellType.VERTICAL_RECTANGLE,
+    backgroundColor: Color.orange,
+  },
+  { position: [6, 2], type: CellType.CIRCLE, backgroundColor: Color.orange },
 
-  { position: [4, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [5, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [6, 3], type: CellType.CIRCLE, color: Color.primary },
+  { position: [4, 3], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [5, 3], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [6, 3], type: CellType.CIRCLE, backgroundColor: Color.primary },
 
   {
     position: [1, 4],
     type: CellType.LONG_HORIZONTAL_RECTANGLE,
-    color: Color.yellow,
+    backgroundColor: Color.yellow,
     text: "Solve with",
   },
-  { position: [4, 4], type: CellType.CIRCLE, color: Color.orange },
-  { position: [5, 4], type: CellType.CIRCLE, color: Color.gray },
-  { position: [6, 4], type: CellType.CIRCLE, color: Color.gray },
+  { position: [4, 4], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [5, 4], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [6, 4], type: CellType.CIRCLE, backgroundColor: Color.gray },
 
-  { position: [1, 5], type: CellType.CIRCLE, color: Color.gray },
-  { position: [2, 5], type: CellType.CIRCLE, color: Color.pink },
-  { position: [3, 5], type: CellType.CIRCLE, color: Color.primary },
+  { position: [1, 5], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [2, 5], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [3, 5], type: CellType.CIRCLE, backgroundColor: Color.primary },
   {
     position: [4, 5],
     type: CellType.CIRCLE_WITH_TEXT,
-    color: Color.yellow,
+    backgroundColor: Color.yellow,
     text: "us",
   },
 
-  { position: [1, 6], type: CellType.CIRCLE, color: Color.gray },
-  { position: [2, 6], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 6], type: CellType.CIRCLE, color: Color.pink },
-  { position: [4, 6], type: CellType.CIRCLE, color: Color.primary },
-  { position: [5, 6], type: CellType.CIRCLE, color: Color.pink },
-  { position: [6, 6], type: CellType.CIRCLE, color: Color.gray },
+  { position: [1, 6], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [2, 6], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [3, 6], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [4, 6], type: CellType.CIRCLE, backgroundColor: Color.primary },
+  { position: [5, 6], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [6, 6], type: CellType.CIRCLE, backgroundColor: Color.gray },
 
-  { position: [1, 7], type: CellType.CIRCLE, color: Color.gray },
-  { position: [2, 7], type: CellType.CIRCLE, color: Color.gray },
-  { position: [3, 7], type: CellType.CIRCLE, color: Color.gray },
-  { position: [6, 7], type: CellType.CIRCLE, color: Color.orange },
+  { position: [1, 7], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [2, 7], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [3, 7], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [6, 7], type: CellType.CIRCLE, backgroundColor: Color.orange },
 
   {
     position: [1, 8],
     type: CellType.TEXT,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     text: "HI-ARC",
   },
-  { position: [4, 8], type: CellType.CIRCLE, color: Color.gray },
-  { position: [5, 8], type: CellType.CIRCLE, color: Color.orange },
-  { position: [6, 8], type: CellType.CIRCLE, color: Color.gray },
+  { position: [4, 8], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [5, 8], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [6, 8], type: CellType.CIRCLE, backgroundColor: Color.gray },
 
-  { position: [5, 9], type: CellType.CIRCLE, color: Color.pink },
-  { position: [6, 9], type: CellType.CIRCLE, color: Color.gray },
+  { position: [5, 9], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [6, 9], type: CellType.CIRCLE, backgroundColor: Color.gray },
 
-  { position: [5, 10], type: CellType.CIRCLE, color: Color.gray },
-  { position: [6, 10], type: CellType.CIRCLE, color: Color.pink },
+  { position: [5, 10], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [6, 10], type: CellType.CIRCLE, backgroundColor: Color.pink },
   // { position: [1, 1], type: CellType.CIRCLE, color: Color.gray, delay: 1 },
   // { position: [3, 1], type: CellType.CIRCLE, color: Color.gray, delay: 2 },
   // { position: [5, 6], type: CellType.CIRCLE, color: Color.gray, delay: 3 },
@@ -80,7 +88,7 @@ const MobileTopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [4, 7],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "학회 소개",
     index: 0,
     url: "introduce_hiarc",
@@ -88,7 +96,7 @@ const MobileTopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [4, 2],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "스터디",
     index: 1,
     url: "study",
@@ -96,7 +104,7 @@ const MobileTopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [1, 3],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "학회 활동",
     index: 2,
     url: "activity",
@@ -104,7 +112,7 @@ const MobileTopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [5, 5],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "수상 경력",
     index: 3,
     url: "award",
diff --git a/src/constants/data/main_title/TopLayerGridData.ts b/src/constants/data/main_title/TopLayerGridData.ts
index 3ce737c..04009fb 100644
--- a/src/constants/data/main_title/TopLayerGridData.ts
+++ b/src/constants/data/main_title/TopLayerGridData.ts
@@ -4,57 +4,115 @@ import CellType from "@/enum/CellType";
 import TopLayerGridItemData from "@/types/TopLayerGridItemData";
 
 const TopLayerGridData: TopLayerGridItemData[] = [
-  { position: [2, 1], type: CellType.CIRCLE, color: Color.orange },
-  { position: [7, 1], type: CellType.HORIZONTAL_RECTANGLE, color: Color.gray },
-  { position: [9, 1], type: CellType.CIRCLE, color: Color.orange },
-  { position: [1, 2], type: CellType.CIRCLE, color: Color.orange },
-  { position: [4, 2], type: CellType.CIRCLE, color: Color.pink },
-  { position: [5, 2], type: CellType.CIRCLE, color: Color.pink },
-  { position: [6, 2], type: CellType.CIRCLE, color: Color.gray },
-  { position: [7, 2], type: CellType.VERTICAL_RECTANGLE, color: Color.orange },
-  { position: [10, 2], type: CellType.CIRCLE, color: Color.orange },
-  { position: [2, 3], type: CellType.CIRCLE, color: Color.orange },
-  { position: [3, 3], type: CellType.CIRCLE, color: Color.pink },
-  { position: [4, 3], type: CellType.CIRCLE, color: Color.pink },
-  { position: [8, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [9, 3], type: CellType.CIRCLE, color: Color.gray },
-  { position: [8, 4], type: CellType.CIRCLE, color: Color.orange },
-  { position: [8, 4], type: CellType.CIRCLE, color: Color.orange },
-  { position: [9, 4], type: CellType.CIRCLE, color: Color.gray },
-  { position: [10, 4], type: CellType.CIRCLE, color: Color.gray },
-  { position: [5, 5], type: CellType.CIRCLE, color: Color.gray },
-  { position: [6, 5], type: CellType.CIRCLE, color: Color.pink },
-  { position: [7, 6], type: CellType.CIRCLE, color: Color.pink },
-  { position: [6, 6], type: CellType.CIRCLE, color: Color.gray },
-  { position: [8, 6], type: CellType.CIRCLE, color: Color.primary },
+  { position: [2, 1], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  {
+    position: [7, 1],
+    type: CellType.HORIZONTAL_RECTANGLE,
+    backgroundColor: Color.gray,
+  },
+  { position: [9, 1], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [1, 2], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [4, 2], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [5, 2], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [6, 2], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  {
+    position: [7, 2],
+    type: CellType.VERTICAL_RECTANGLE,
+    backgroundColor: Color.orange,
+  },
+  { position: [10, 2], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [2, 3], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [3, 3], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [4, 3], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [8, 3], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [9, 3], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [8, 4], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [8, 4], type: CellType.CIRCLE, backgroundColor: Color.orange },
+  { position: [9, 4], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [10, 4], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [5, 5], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [6, 5], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [7, 6], type: CellType.CIRCLE, backgroundColor: Color.pink },
+  { position: [6, 6], type: CellType.CIRCLE, backgroundColor: Color.gray },
+  { position: [8, 6], type: CellType.CIRCLE, backgroundColor: Color.primary },
 
-  { position: [1, 1], type: CellType.CIRCLE, color: Color.gray, delay: 1 },
-  { position: [3, 1], type: CellType.CIRCLE, color: Color.gray, delay: 2 },
-  { position: [5, 6], type: CellType.CIRCLE, color: Color.gray, delay: 3 },
-  { position: [10, 1], type: CellType.CIRCLE, color: Color.orange, delay: 4 },
-  { position: [6, 1], type: CellType.CIRCLE, color: Color.gray, delay: 5 },
-  { position: [10, 6], type: CellType.CIRCLE, color: Color.gray, delay: 6 },
-  { position: [1, 3], type: CellType.CIRCLE, color: Color.gray, delay: 7 },
-  { position: [9, 6], type: CellType.CIRCLE, color: Color.pink, delay: 8 },
-  { position: [5, 1], type: CellType.CIRCLE, color: Color.pink, delay: 9 },
-  { position: [1, 4], type: CellType.TEXT, color: Color.primary, delay: 10 },
+  {
+    position: [1, 1],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 1,
+  },
+  {
+    position: [3, 1],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 2,
+  },
+  {
+    position: [5, 6],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 3,
+  },
+  {
+    position: [10, 1],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.orange,
+    delay: 4,
+  },
+  {
+    position: [6, 1],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 5,
+  },
+  {
+    position: [10, 6],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 6,
+  },
+  {
+    position: [1, 3],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.gray,
+    delay: 7,
+  },
+  {
+    position: [9, 6],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.pink,
+    delay: 8,
+  },
+  {
+    position: [5, 1],
+    type: CellType.CIRCLE,
+    backgroundColor: Color.pink,
+    delay: 9,
+  },
+  {
+    position: [1, 4],
+    type: CellType.TEXT,
+    backgroundColor: Color.primary,
+    delay: 10,
+  },
 
   {
     position: [8, 5],
     type: CellType.CIRCLE_WITH_TEXT,
-    color: Color.yellow,
+    backgroundColor: Color.yellow,
     text: "us",
   },
   {
     position: [5, 4],
     type: CellType.LONG_HORIZONTAL_RECTANGLE,
-    color: Color.yellow,
+    backgroundColor: Color.yellow,
     text: "solve with",
   },
   {
     position: [2, 2],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "학회 소개",
     index: 0,
     url: "introduce_hiarc",
@@ -62,13 +120,13 @@ const TopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [4, 1],
     type: CellType.CIRCLE_WITH_ICON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     index: 0,
   },
   {
     position: [8, 2],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "스터디",
     index: 1,
     url: "study",
@@ -76,13 +134,13 @@ const TopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [10, 3],
     type: CellType.CIRCLE_WITH_ICON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     index: 1,
   },
   {
     position: [5, 3],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "학회 활동",
     index: 2,
     url: "activity",
@@ -90,19 +148,19 @@ const TopLayerGridData: TopLayerGridItemData[] = [
   {
     position: [4, 4],
     type: CellType.CIRCLE_WITH_ICON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     index: 2,
   },
   {
     position: [7, 5],
     type: CellType.CIRCLE_WITH_ICON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     index: 3,
   },
   {
     position: [9, 5],
     type: CellType.BUTTON,
-    color: Color.primary,
+    backgroundColor: Color.primary,
     buttonText: "수상 경력",
     index: 3,
     url: "award",
diff --git a/src/enum/CellType.jsx b/src/enum/CellType.jsx
index 2e631aa..774b3b9 100644
--- a/src/enum/CellType.jsx
+++ b/src/enum/CellType.jsx
@@ -3,6 +3,8 @@ const CellType = {
   CIRCLE_WITH_TEXT: "CIRCLE_WITH_TEXT",
   CIRCLE_WITH_ICON: "CIRCLE_WITH_ICON",
   BUTTON: "BUTTON",
+  BUTTON_WITH_ICON: "BUTTON_WITH_ICON",
+  LONG_BUTTON_WITH_ICON: "LONG_BUTTON_WITH_ICON",
   HORIZONTAL_RECTANGLE: "HORIZONTAL_RECTANGLE",
   LONG_HORIZONTAL_RECTANGLE: "LONG_HORIZONTAL_RECTANGLE",
   VERTICAL_RECTANGLE: "VERTICAL_RECTANGLE",
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 582b8d4..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* src/index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/src/main.jsx b/src/main.jsx
index b5b66da..ddf3442 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,7 +2,6 @@ import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
 import { BrowserRouter } from "react-router-dom";
 import GlobalStyle from "./components/ui/GlobalStyle.jsx";
-import "./index.css";
 
 createRoot(document.getElementById("root")).render(
   <BrowserRouter>
diff --git a/src/types/TopLayerGridItemData.ts b/src/types/TopLayerGridItemData.ts
index 32f040d..21bcdd2 100644
--- a/src/types/TopLayerGridItemData.ts
+++ b/src/types/TopLayerGridItemData.ts
@@ -1,12 +1,14 @@
 interface TopLayerGridItemData {
   position: [number, number]; // [gridColumn, gridRow]
   type: string; // CellType의 값 ("CIRCLE", "CIRCLE_WITH_TEXT", 등)
-  color: string;
+  backgroundColor: string;
+  contentColor?: string;
   text?: string;
   index?: number;
   delay?: number;
   buttonText?: string;
   url?: string;
+  websiteUrl?: string;
 }
 
 export default TopLayerGridItemData;