diff --git a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx
index 5d8f5266..6db25352 100644
--- a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx
+++ b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Box, Center, Flex, Image, Text, VStack } from '@devup-ui/react'
+import { Box, Center, Flex, Grid, Image, Text, VStack } from '@devup-ui/react'
 import { useState } from 'react'
 
 import IconCode from '@/components/icons/IconCode'
@@ -28,7 +28,7 @@ export default function MdxCardFooter({
   }
 
   return (
-    <VStack justifyContent="flex-end" maxH="600px" maxW="100%">
+    <VStack justifyContent="flex-end" maxW="100%">
       <Flex
         borderTop="1px solid $border"
         justifyContent="flex-end"
@@ -56,52 +56,60 @@ export default function MdxCardFooter({
           <Text>Show Code</Text>
         </Center>
       </Flex>
-      {isOpen && (
-        <>
-          <Box h="0" pos="relative" w="100%">
-            <Center
-              _active={{
-                borderColor: '$primary',
-                bg: '$menuActive',
-              }}
-              _hover={{
-                borderColor: '$primary',
-                bg: '$menuHover',
-              }}
-              bg="$containerBackground"
-              border="1px solid transparent"
-              borderRadius="4px"
-              boxShadow="0 2px 6px 0 $shadow"
-              cursor="pointer"
-              gap="8px"
-              onClick={handleCopy}
-              p="8px"
-              pos="absolute"
-              right="16px"
-              top="16px"
-              transition="all 0.125s ease-in-out"
-            >
-              <Image
-                aspectRatio="1"
-                boxSize="20px"
-                src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
-              />
-              <Text color="$captionBold" typography="caption">
-                Copy
-              </Text>
-            </Center>
-          </Box>
-          <Box
-            borderTop="1px solid $border"
-            h="100%"
-            overflow="auto"
-            px="24px"
-            py="16px"
-          >
-            {children}
-          </Box>
-        </>
-      )}
+      <Grid
+        gridTemplateRows={isOpen ? '1fr' : '0fr'}
+        maxH="600px"
+        pos="relative"
+        transition="grid-template-rows 0.3s ease-in-out"
+      >
+        {isOpen && (
+          <>
+            <Box pos="absolute" w="100%">
+              <Center
+                _active={{
+                  borderColor: '$primary',
+                  bg: '$menuActive',
+                }}
+                _hover={{
+                  borderColor: '$primary',
+                  bg: '$menuHover',
+                }}
+                bg="$containerBackground"
+                border="1px solid transparent"
+                borderRadius="4px"
+                boxShadow="0 2px 6px 0 $shadow"
+                cursor="pointer"
+                gap="8px"
+                onClick={handleCopy}
+                p="8px"
+                pos="absolute"
+                right="16px"
+                top="16px"
+                transition="all 0.125s ease-in-out"
+              >
+                <Image
+                  aspectRatio="1"
+                  boxSize="20px"
+                  src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
+                />
+                <Text color="$captionBold" typography="caption">
+                  Copy
+                </Text>
+              </Center>
+            </Box>
+          </>
+        )}
+        <Box
+          borderTop={isOpen ? '1px solid $border' : 'none'}
+          h="100%"
+          onWheel={(e) => e.stopPropagation()}
+          overflow="auto"
+          p={isOpen ? ['12px', null, '24px'] : '0'}
+          transition="padding 0.2s ease-in-out"
+        >
+          {children}
+        </Box>
+      </Grid>
     </VStack>
   )
 }
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index f11af852..8b5bd1dc 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -27,6 +27,56 @@ export const metadata: Metadata = {
 resetCss()
 
 globalCss({
+  fontFaces: [
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format("woff2")',
+      fontWeight: 800,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2) format("woff2")',
+      fontWeight: 700,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2) format("woff2")',
+      fontWeight: 600,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2) format("woff2")',
+      fontWeight: 500,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format("woff2")',
+      fontWeight: 400,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format("woff2")',
+      fontWeight: 300,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'Pretendard',
+      src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2) format("woff2")',
+      fontWeight: 100,
+      fontStyle: 'normal',
+    },
+    {
+      fontFamily: 'D2Coding',
+      src: 'url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff) format("woff")',
+      fontWeight: 400,
+      fontDisplay: 'swap',
+    },
+  ],
   code: {
     fontFamily: 'D2Coding',
     fontSize: ['13px', '15px'],
@@ -57,12 +107,12 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 })(window,document,'script','dataLayer','GTM-PSRKC4QZ')`,
           }}
         />
-        <ThemeScript auto />
-        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        <link href="/favicon.ico" rel="shortcut icon" />
         <link
-          href="https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css"
-          rel="stylesheet"
+          as="font"
+          crossOrigin="anonymous"
+          href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff"
+          rel="preload"
+          type="font/woff"
         />
         {[
           'ExtraBold',
@@ -82,10 +132,9 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             type="font/woff2"
           />
         ))}
-        <link
-          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
-          rel="stylesheet"
-        />
+        <ThemeScript auto />
+        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        <link href="/favicon.ico" rel="shortcut icon" />
       </head>
       <body
         className={css({
diff --git a/apps/landing/src/components/Code.tsx b/apps/landing/src/components/Code.tsx
index 6a8b4640..3c6ae2c2 100644
--- a/apps/landing/src/components/Code.tsx
+++ b/apps/landing/src/components/Code.tsx
@@ -17,7 +17,12 @@ export const Code = ({
           display: 'none',
         }}
       >
-        <SyntaxHighlighter language={language} showLineNumbers style={Light}>
+        <SyntaxHighlighter
+          customStyle={{ margin: 0 }}
+          language={language}
+          showLineNumbers
+          style={Light}
+        >
           {value}
         </SyntaxHighlighter>
       </Box>
diff --git a/apps/landing/tsconfig.json b/apps/landing/tsconfig.json
index 23b738d7..1513e720 100644
--- a/apps/landing/tsconfig.json
+++ b/apps/landing/tsconfig.json
@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {