diff --git a/codes/document.js b/codes/document.js
new file mode 100644
index 0000000..950ea1a
--- /dev/null
+++ b/codes/document.js
@@ -0,0 +1,47 @@
+const COMMON_CODE = `
+// You can use a key-value pair to share data with peers.
+// The key is a string, and the value should be serializable - objects, arrays, and primitives.
+doc.update((root) => {
+  root.num = 1;           // {"num":1}
+  root.obj = {'str':'a'}; // {"num":1,"obj":{"str":"a"}}
+  root.arr = ['1', '2'];  // {"num":1,"obj":{"str":"a"},"arr":[1,2]}
+});
+`;
+
+const TEXT_CODE = ` 
+// Text provides supports for collaborative plain text editing.
+// It also has selection information for sharing the cursor position.
+doc.update((root) => {
+  root.text = new yorkie.Text();  // {"text":""}
+  root.text.edit(0, 0, 'hello');  // {"text":"hello"}
+  root.text.edit(0, 1, 'H');      // {"text":"Hello"}
+  root.text.select(0, 1);         // {"text":"^H^ello"}
+});
+`;
+
+const RICHTEXT_CODE = `
+// RichText is similar to Text except that we can add attributes to contents.
+doc.update((root) => {
+  root.text = new yorkie.RichText();       // {"text":""}
+  root.text.edit(0, 0, 'hello');           // {"text":"hello"}
+  root.text.edit(0, 1, 'H');               // {"text":"Hello"}
+  root.text.setStyle(0, 1, {bold: true});  // {"text":"<b>H</b>ello"}
+});
+`;
+
+const COUNTER_CODE = ` 
+// Counter supports numeric types that change with addition and subtraction.
+doc.update((root) => {
+  root.counter = new yorkie.Counter(1);  // {"counter":1}
+  root.counter.increase(2);              // {"counter":3}
+  root.counter.increase(3.5);            // {"counter":6.5}
+  root.counter.increase(-3.5);           // {"counter":3}
+});
+`;
+
+export const DOCUMENT_CODE = {
+  common: COMMON_CODE,
+  text: TEXT_CODE,
+  richText: RICHTEXT_CODE,
+  counter: COUNTER_CODE,
+};
diff --git a/codes/features.js b/codes/features.js
new file mode 100644
index 0000000..5b8ca70
--- /dev/null
+++ b/codes/features.js
@@ -0,0 +1,102 @@
+const PROFILE_JS = `
+import yorkie from 'yorkie-js-sdk';
+
+async function main() {
+  const client = new yorkie.Client('${process.env.NEXT_PUBLIC_API_ADDR}', {
+    apiKey: 'MY_API_KEY',
+    // set the client's name and color to presence.
+    presence: {
+      name: getRandomName(),
+      color: getRandomColor(),
+    },
+  });
+  await client.activate();
+
+  const doc = new yorkie.Document('example-profile');
+  await client.attach(doc);
+
+  client.subscribe((event) => {
+    if (event.type === 'peers-changed') {
+      // get presence of all clients connected to the Document. 
+      // {<clientID>: {name: string, color: string}}
+      const peers = event.value[doc.getKey()];
+      
+      // show peer list
+      updatePeerList(peers);
+    }
+  });
+}
+main();
+`;
+
+const CURSOR_JS = ` 
+import yorkie from 'yorkie-js-sdk';
+
+async function main() {
+  const client = new yorkie.Client('${process.env.NEXT_PUBLIC_API_ADDR}', {
+    apiKey: 'MY_API_KEY',
+  });
+  await client.activate();
+
+  const doc = new yorkie.Document('my-first-document');
+  await client.attach(doc);
+
+  client.subscribe((event) => {
+    if (event.type === 'peers-changed') {
+      // get presence of all clients connected to the Document. 
+      // {<clientID>: {cursor: {x: number, y: number}}}
+      const peers = event.value[doc.getKey()];
+      
+      // show peer cursors
+      updatePeerCursors(peers);
+    }
+  });
+
+  document.body.addEventListener('mousemove', (e) => {
+    // set the cursor position to presence.
+    // Presence will be shared with other clients.
+    client.updatePresence('cursor', {
+      x: e.clientX,
+      y: e.clientY,
+    })
+  });
+}
+main();
+`;
+
+const SELECTION_JS = ` 
+// js
+`;
+
+const EDITING_JS = ` 
+// js
+`;
+
+const EDITING_ANDROID = ` 
+// android
+`;
+
+const EDITING_IOS = ` 
+// ios
+`;
+
+export const FEATURES_CODE = {
+  profile: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: PROFILE_JS, language: 'javascript' },
+  },
+  cursor: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: CURSOR_JS, language: 'javascript' },
+  },
+  selection: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: SELECTION_JS, language: 'javascript' },
+  },
+  editing: {
+    tabOrder: ['js', 'android', 'ios'],
+    js: { title: 'JS SDK', code: EDITING_JS, language: 'javascript' },
+    android: { title: 'Android SDK', code: EDITING_ANDROID, language: 'kotlin' },
+    ios: { title: 'iOS SDK', code: EDITING_IOS, language: 'swift' },
+  },
+};
diff --git a/components/CodeBlock/PrismCode.tsx b/components/CodeBlock/PrismCode.tsx
index be4720c..9ec1377 100644
--- a/components/CodeBlock/PrismCode.tsx
+++ b/components/CodeBlock/PrismCode.tsx
@@ -19,7 +19,7 @@ export type PrismCodeProps = {
 
 export function PrismCode({ code, language, withLineNumbers }: PrismCodeProps) {
   return (
-    <Highlight {...defaultProps} code={code} theme={theme} language={language}>
+    <Highlight {...defaultProps} code={code.trim()} theme={theme} language={language}>
       {({ className, tokens, getLineProps, getTokenProps }) => (
         <pre className={className}>
           {tokens.map((line, i) => (
diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
index d7a4e73..231cab5 100644
--- a/components/Layout/Header.tsx
+++ b/components/Layout/Header.tsx
@@ -14,7 +14,7 @@ export function Header(): ReactElement {
   useEffect(() => {
     const isLoggedIn = isValidToken(localStorage.getItem('token'));
     setIsLoggedIn(isLoggedIn);
-  }, [setIsLoggedIn])
+  }, [setIsLoggedIn]);
 
   // TODO(hackerwins): Remove examples condition when examples are ready.
   return (
@@ -39,15 +39,13 @@ export function Header(): ReactElement {
                 Documentation
               </Link>
             </li>
-            {
-              process.env.NODE_ENV === 'development' && (
-                <li className={`gnb_item ${pathname == '/examples' ? 'is_active' : ''}`}>
-                  <Link href="/examples" className="link">
-                    Examples
-                  </Link>
-                </li>
-              )
-            }
+            {process.env.NODE_ENV === 'development' && (
+              <li className={`gnb_item ${pathname == '/examples' ? 'is_active' : ''}`}>
+                <Link href="/examples" className="link">
+                  Examples
+                </Link>
+              </li>
+            )}
             <li className={`gnb_item ${pathname == '/community' ? 'is_active' : ''}`}>
               <Link href="/community" className="link">
                 Community
@@ -56,22 +54,25 @@ export function Header(): ReactElement {
           </ul>
         </nav>
         <div className="header_util">
-          {
-            isLoggedIn ? (
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`} outline className="gray50">
-                  Dashboard
-                </Button>
-            ) : (
-              <>
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`} outline className="gray50">
-                  Sign in
-                </Button>
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`} className="orange_0" icon={<Icon type="star" />}>
-                  Start for free
-                </Button>
-              </>
-            )
-          }
+          {isLoggedIn ? (
+            <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`} outline className="gray50">
+              Dashboard
+            </Button>
+          ) : (
+            <>
+              <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`} outline className="gray50">
+                Sign in
+              </Button>
+              <Button
+                as="a"
+                href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
+                className="orange_0"
+                icon={<Icon type="star" />}
+              >
+                Start for free
+              </Button>
+            </>
+          )}
           <MobileGnbDropdown isLoggedIn={isLoggedIn} />
         </div>
       </div>
diff --git a/components/Layout/MobileGnbDropdown.tsx b/components/Layout/MobileGnbDropdown.tsx
index 212da95..a6495a6 100644
--- a/components/Layout/MobileGnbDropdown.tsx
+++ b/components/Layout/MobileGnbDropdown.tsx
@@ -4,9 +4,7 @@ import Link from 'next/link';
 import classNames from 'classnames';
 import { Popover, Icon } from 'components';
 
-export function MobileGnbDropdown({isLoggedIn} : {
-  isLoggedIn: boolean;
-}) {
+export function MobileGnbDropdown({ isLoggedIn }: { isLoggedIn: boolean }) {
   const [gnbOpened, setGnbOpened] = useState(false);
   const [docsMenuOpened, setDocsMenuOpened] = useState(false);
   const { asPath } = useRouter();
@@ -50,7 +48,7 @@ export function MobileGnbDropdown({isLoggedIn} : {
                   setDocsMenuOpened((opened) => !opened);
                 }}
               >
-                <Icon type="arrow" className="icon_toggle"/>
+                <Icon type="arrow" className="icon_toggle" />
                 <span className="dropdown_text">Documentation</span>
               </button>
               <nav
@@ -143,18 +141,16 @@ export function MobileGnbDropdown({isLoggedIn} : {
                 </ul>
               </nav>
             </li>
-            {
-              process.env.NODE_ENV === 'development' && (
-                <li className="dropdown_item">
-                  <Link
-                    href="/examples"
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === '/examples' })}
-                  >
-                    <span className="dropdown_text">Example</span>
-                  </Link>
-                </li>
-              )
-            }
+            {process.env.NODE_ENV === 'development' && (
+              <li className="dropdown_item">
+                <Link
+                  href="/examples"
+                  className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === '/examples' })}
+                >
+                  <span className="dropdown_text">Example</span>
+                </Link>
+              </li>
+            )}
             <li className="dropdown_item">
               <Link
                 href="/community"
@@ -169,7 +165,9 @@ export function MobileGnbDropdown({isLoggedIn} : {
               <li className="dropdown_item">
                 <a
                   href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`}
-                  className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}` })}
+                  className={classNames('dropdown_menu', {
+                    is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`,
+                  })}
                 >
                   <span className="dropdown_text">Dashboard</span>
                 </a>
@@ -179,7 +177,9 @@ export function MobileGnbDropdown({isLoggedIn} : {
                 <li className="dropdown_item">
                   <a
                     href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`}
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login` })}
+                    className={classNames('dropdown_menu', {
+                      is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`,
+                    })}
                   >
                     <span className="dropdown_text">Sign in</span>
                   </a>
@@ -187,7 +187,9 @@ export function MobileGnbDropdown({isLoggedIn} : {
                 <li className="dropdown_item">
                   <a
                     href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup` })}
+                    className={classNames('dropdown_menu', {
+                      is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`,
+                    })}
                   >
                     <span className="dropdown_text">Start for free</span>
                   </a>
diff --git a/pages/index.tsx b/pages/index.tsx
index 336d7bd..817917a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import Link from 'next/link';
 import { Layout, Button, Icon, CodeBlock, CodeBlockHeader, Accordion } from '@/components';
 import { ChartMotion, StateSharingMotion, ServerMotion, MainBannerMotion } from '@/components/motions';
 import UserGroupSVG from '@/public/assets/icons/icon_service_main_users_group.svg';
@@ -10,31 +9,13 @@ import CollaboProfileSVG from '@/public/assets/icons/icon_collaborate_profile.sv
 import CollaboCursorSVG from '@/public/assets/icons/icon_collaborate_cursor.svg';
 import CollaboSelectionSVG from '@/public/assets/icons/icon_collaborate_selection.svg';
 import CollaboEditingSVG from '@/public/assets/icons/icon_collaborate_editing.svg';
+import { FEATURES_CODE } from '@/codes/features';
 
-type FeatureType = 'profile' | 'cursor' | 'selection' | 'editing';
-const sampleCode = `import yorkie from 'yorkie-js-sdk';
-
-async function main() {
-  const client = new yorkie.Client('${process.env.NEXT_PUBLIC_API_ADDR}', {
-    apiKey: 'MY_API_KEY',
-  });
-  await client.activate();
-
-  const doc = new yorkie.Document('my-first-document');
-  await client.attach(doc);
-
-  client.subscribe((event) => {
-    if (event.type === 'peers-changed') {
-      const peers = event.value[doc.getKey()];
-      document.getElementById('peersCount').innerHTML = Object.entries(peers).length;
-    }
-  });
-}
-main();`;
-
+type FeatureType = keyof typeof FEATURES_CODE;
 const Home: NextPage = () => {
   const [bannerActive, setBannerActive] = useState(false);
   const [activeFeatureCard, setActiveFeatureCard] = useState<FeatureType>('profile');
+  const [activeFeatureCode, setActiveFeatureCode] = useState({ type: 'js', info: FEATURES_CODE.profile.js });
 
   // TODO(hackerwins): Remove examples condition when examples are ready.
   return (
@@ -89,7 +70,8 @@ const Home: NextPage = () => {
                 <span className="point">collaborative</span> in a flash!
               </strong>
               <p className="section_desc">
-                Easily add collaboration to your apps with our API-based services. <br /> Sign up now and start building powerful, high-performance collaborative features in no time.
+                Easily add collaboration to your apps with our API-based services. <br /> Sign up now and start building
+                powerful, high-performance collaborative features in no time.
               </p>
               <Button.Box>
                 <Button as="link" href="/docs/getting-started" className="orange_0" icon={<Icon type="book" />}>
@@ -110,8 +92,10 @@ const Home: NextPage = () => {
             Easily add stable and diverse collaborative features
             <br className="br_mo" />
             to your product with Yorkie. <br />
-            Transform your local-based product into a <br className="br_mo" />  collaborative online experience with our powerful tools. <br/>
-            Sign up now and start providing your users <br className="br_mo" /> with a completely new real-time experience.
+            Transform your local-based product into a <br className="br_mo" /> collaborative online experience with our
+            powerful tools. <br />
+            Sign up now and start providing your users <br className="br_mo" /> with a completely new real-time
+            experience.
           </p>
           <div className="section_content">
             <ul
@@ -120,7 +104,13 @@ const Home: NextPage = () => {
                 const target = (e.target as Element).closest('.service_card_menu');
                 if (!target) return;
 
-                setActiveFeatureCard(target.getAttribute('data-item') as FeatureType);
+                const featureType = target.getAttribute('data-item') as FeatureType;
+                const codeType = FEATURES_CODE[featureType].tabOrder[0];
+                setActiveFeatureCard(featureType);
+                setActiveFeatureCode({
+                  type: codeType,
+                  info: (FEATURES_CODE[featureType] as any)[codeType],
+                });
               }}
             >
               <li className={classNames('service_card_item', { is_active: activeFeatureCard === 'profile' })}>
@@ -176,39 +166,53 @@ const Home: NextPage = () => {
             <CodeBlock.Wrapper>
               <CodeBlockHeader>
                 <CodeBlockHeader.LeftBox>
-                  <button type="button" className="btn_item is_active">
-                    JS SDK
-                  </button>
+                  {FEATURES_CODE[activeFeatureCard].tabOrder.map((codeType) => (
+                    <button
+                      type="button"
+                      key={codeType}
+                      className={classNames('btn_item', { is_active: activeFeatureCode.type === codeType })}
+                      onClick={() =>
+                        setActiveFeatureCode({
+                          type: codeType,
+                          info: (FEATURES_CODE[activeFeatureCard] as any)[codeType],
+                        })
+                      }
+                    >
+                      {(FEATURES_CODE[activeFeatureCard] as any)[codeType].title}
+                    </button>
+                  ))}
                 </CodeBlockHeader.LeftBox>
                 <CodeBlockHeader.RightBox>
-                  <CodeBlockHeader.CopyButton value={sampleCode} />
+                  <CodeBlockHeader.CopyButton value={activeFeatureCode.info.code} />
                 </CodeBlockHeader.RightBox>
               </CodeBlockHeader>
-              <CodeBlock code={sampleCode} language="javascript" withLineNumbers />
+              <CodeBlock
+                code={activeFeatureCode.info.code}
+                language={activeFeatureCode.info.language as any}
+                withLineNumbers
+              />
             </CodeBlock.Wrapper>
           </div>
         </section>
-        {
-          process.env.NODE_ENV === 'development' && (
-            <section className="section">
-              <h2 className="section_title">
-                What experiences <br />
-                can you create
-                <br className="br_mo_xs" /> with Yorkie?
-              </h2>
-              <p className="section_desc">Test our examples to add diverse collaborative features to your product.</p>
-              <div className="section_content draw">
-                <div className="draw_box"></div>
-                <div className="draw_box"></div>
-              </div>
-              <Button.Box>
-                <Button as="link" href="/examples" className="orange_0" icon={<Icon type="bulb" />}>
-                  View all examples
-                </Button>
-              </Button.Box>
-            </section>
-          )
-        }
+        {process.env.NODE_ENV === 'development' && (
+          <section className="section">
+            <h2 className="section_title">
+              What experiences <br />
+              can you create
+              <br className="br_mo_xs" /> with Yorkie?
+            </h2>
+            <p className="section_desc">Test our examples to add diverse collaborative features to your product.</p>
+            <div className="section_content draw">
+              <div className="draw_box"></div>
+              <div className="draw_box"></div>
+            </div>
+            <Button.Box>
+              <Button as="link" href="/examples" className="orange_0" icon={<Icon type="bulb" />}>
+                View all examples
+              </Button>
+            </Button.Box>
+          </section>
+        )}
         <section className="section">
           <h2 className="section_title">
             Stable.
@@ -226,10 +230,17 @@ const Home: NextPage = () => {
                 <div className="text_box">
                   <strong className="title">Document and Presence</strong>
                   <p className="desc">
-                    Document is stored using conflict-free replicated data types(CRDTs), which ensures that multiple users can edit the same data concurrently without encountering conflicts.
-                    Presence represents a peer&apos;s awareness of the data being edited. It is used to track which users are currently editing the document.
+                    Document is stored using conflict-free replicated data types(CRDTs), which ensures that multiple
+                    users can edit the same data concurrently without encountering conflicts. Presence represents a
+                    peer&apos;s awareness of the data being edited. It is used to track which users are currently
+                    editing the document.
                   </p>
-                  <Button as="link" href="/products#document-and-presence" className="gray800" icon={<Icon type="book" />}>
+                  <Button
+                    as="link"
+                    href="/products#document-and-presence"
+                    className="gray800"
+                    icon={<Icon type="book" />}
+                  >
                     Learn more about Document and Presence
                   </Button>
                 </div>
@@ -241,15 +252,11 @@ const Home: NextPage = () => {
                 <div className="text_box">
                   <strong className="title">Data Warehouse with Dashboard</strong>
                   <p className="desc">
-                    Dashboard allows users to easily browse stored documents and monitor the data warehouse in real-time.
-                    With Dashboard, users can quickly and easily supervise the data warehouse and ensure that it is functioning properly.
+                    Dashboard allows users to easily browse stored documents and monitor the data warehouse in
+                    real-time. With Dashboard, users can quickly and easily supervise the data warehouse and ensure that
+                    it is functioning properly.
                   </p>
-                  <Button
-                    as="link"
-                    href="/products#dashboard"
-                    className="gray800"
-                    icon={<Icon type="book" />}
-                  >
+                  <Button as="link" href="/products#dashboard" className="gray800" icon={<Icon type="book" />}>
                     Learn more about Dashboard
                   </Button>
                 </div>
@@ -261,8 +268,9 @@ const Home: NextPage = () => {
                 <div className="text_box">
                   <strong className="title">Cloud or Self-Hosted Server</strong>
                   <p className="desc">
-                    Yorkie offers flexible deployment options, allowing user to use a cloud or host the server on your own premises.
-                    Whether you want the convenience of cloud or the control of a self-hosted server, Yorkie has you covered.
+                    Yorkie offers flexible deployment options, allowing user to use a cloud or host the server on your
+                    own premises. Whether you want the convenience of cloud or the control of a self-hosted server,
+                    Yorkie has you covered.
                   </p>
                   <Button as="link" href="/products#self-hosted-server" className="gray800" icon={<Icon type="book" />}>
                     Learn more about Self-Hosted Server
@@ -282,10 +290,11 @@ const Home: NextPage = () => {
                   Can we use the Yorkie for free?
                 </Accordion.Control>
                 <Accordion.Panel>
-                  Yes, Yorkie is free to use. <br/><br/>
-                  You can access it at no cost. Please note that the availability of the service and any associated features
-                  may be subject to change without notice. It is always a good idea to check the latest information on the
-                  service&apos;s website to ensure that it is still available and meets your needs.
+                  Yes, Yorkie is free to use. <br />
+                  <br />
+                  You can access it at no cost. Please note that the availability of the service and any associated
+                  features may be subject to change without notice. It is always a good idea to check the latest
+                  information on the service&apos;s website to ensure that it is still available and meets your needs.
                 </Accordion.Panel>
               </Accordion.Item>
               <Accordion.Item value="faq2">
@@ -294,12 +303,14 @@ const Home: NextPage = () => {
                   Is the Yorkie production ready?
                 </Accordion.Control>
                 <Accordion.Panel>
-                  No, Yorkie is not yet production ready. <br/><br/>
-                  While the CRDT algorithm has been verified, not all of the code has been fully battle-tested. The developers of the
-                  service currently estimate that the right time to use it in a production environment will be <b>around summer of &apos;23</b>.
-                  Until then, it is recommended to carefully evaluate the service&apos;s capabilities and reliability before using
-                  it in a production setting. It is also important to note that the availability and features of the service
-                  may change without notice, so it is always best to check the latest information on the service&apos;s website before using it. 
+                  No, Yorkie is not yet production ready. <br />
+                  <br />
+                  While the CRDT algorithm has been verified, not all of the code has been fully battle-tested. The
+                  developers of the service currently estimate that the right time to use it in a production environment
+                  will be <b>around summer of &apos;23</b>. Until then, it is recommended to carefully evaluate the
+                  service&apos;s capabilities and reliability before using it in a production setting. It is also
+                  important to note that the availability and features of the service may change without notice, so it
+                  is always best to check the latest information on the service&apos;s website before using it.
                 </Accordion.Panel>
               </Accordion.Item>
               <Accordion.Item value="faq3">
@@ -308,11 +319,17 @@ const Home: NextPage = () => {
                   How can I contribute to the Yorkie project?
                 </Accordion.Control>
                 <Accordion.Panel>
-                  Yorkie is an open source project, so there are many ways to contribute to its development. <br /><br />
-                  One way to contribute is by reporting any bugs you encounter while using the service. You can also submit
-                  pull requests with improvements or new features that you have developed. If you plan to use Yorkie in your
-                  company, you can also consider donating to the Yorkie community to support its continued development.
-                  You can learn more about how to contribute to the Yorkie project on its website or by visiting our <u><a href="https://discord.com/invite/MVEAwz9sBy">Discord</a></u>.
+                  Yorkie is an open source project, so there are many ways to contribute to its development. <br />
+                  <br />
+                  One way to contribute is by reporting any bugs you encounter while using the service. You can also
+                  submit pull requests with improvements or new features that you have developed. If you plan to use
+                  Yorkie in your company, you can also consider donating to the Yorkie community to support its
+                  continued development. You can learn more about how to contribute to the Yorkie project on its website
+                  or by visiting our{' '}
+                  <u>
+                    <a href="https://discord.com/invite/MVEAwz9sBy">Discord</a>
+                  </u>
+                  .
                 </Accordion.Panel>
               </Accordion.Item>
             </Accordion>
@@ -328,7 +345,12 @@ const Home: NextPage = () => {
             >
               Contact
             </Button>
-            <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`} className="orange_0 btn_start" icon={<Icon type="twinkle" />}>
+            <Button
+              as="a"
+              href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
+              className="orange_0 btn_start"
+              icon={<Icon type="twinkle" />}
+            >
               Start for free
             </Button>
           </Button.Box>
diff --git a/pages/products.tsx b/pages/products.tsx
index fc29bc3..a7f767e 100644
--- a/pages/products.tsx
+++ b/pages/products.tsx
@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
+import classNames from 'classnames';
 import { Button, Icon, Layout, CodeBlock, CodeBlockHeader } from '@/components';
 import { StateSharingDetailMotion, FlexibleDocumentMotion } from '@/components/motions';
 import ProductBannerSVG from '@/public/assets/images/banner/img_product_banner.svg';
@@ -9,17 +11,10 @@ import ProductAwarenessRightSVG from '@/public/assets/images/banner/img_product_
 import ProductPCSVG from '@/public/assets/images/banner/img_product_pc.svg';
 import ProductMobileSVG from '@/public/assets/images/banner/img_product_mobile.svg';
 import ProductPackageSVG from '@/public/assets/images/banner/img_product_package.svg';
-
-const textCode = `// Text provides supports for collaborative plain text editing.
-// It also has selection information for sharing the cursor position.
-doc.update((root) => {
-  root.text = new yorkie.Text();  // {"text":""}
-  root.text.edit(0, 0, 'hello');  // {"text":"hello"}
-  root.text.edit(0, 1, 'H');      // {"text":"Hello"}
-  root.text.select(0, 1);         // {"text":"^H^ello"}
-});`;
+import { DOCUMENT_CODE } from '@/codes/document';
 
 const Products: NextPage = () => {
+  const [documentType, setDocumentType] = useState<keyof typeof DOCUMENT_CODE>('common');
   return (
     <Layout className="product_page">
       <Head>
@@ -39,7 +34,12 @@ const Products: NextPage = () => {
               as a document store.
             </p>
             <Button.Box>
-              <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`} className="orange_0 btn_start" icon={<Icon type="star" />}>
+              <Button
+                as="a"
+                href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
+                className="orange_0 btn_start"
+                icon={<Icon type="star" />}
+              >
                 Start for free
               </Button>
             </Button.Box>
@@ -59,8 +59,8 @@ const Products: NextPage = () => {
               </a>
             </h2>
             <p className="section_desc">
-              Yorkie allow you to build multiplayer products without the need for database configuration
-              and conflict management. This saves time and money.
+              Yorkie allow you to build multiplayer products without the need for database configuration and conflict
+              management. This saves time and money.
             </p>
           </div>
           <div className="section_content conflict_free">
@@ -69,8 +69,9 @@ const Products: NextPage = () => {
             </strong>
             <p className="sub_desc">
               Yorkie implements real-time collaboration based on the Conflict-free Replicated Data Type(CRDT) algorithm.
-              CRDTs offer a clean and reliable way to resolve conflicts when editing concurrent data, unlike Operational Transformation(OT) algorithms
-              which can be complex and may not always ensure convergence. Yorkie&apos;s use of the well-proven CRDT algorithm ensures reliable services.
+              CRDTs offer a clean and reliable way to resolve conflicts when editing concurrent data, unlike Operational
+              Transformation(OT) algorithms which can be complex and may not always ensure convergence. Yorkie&apos;s
+              use of the well-proven CRDT algorithm ensures reliable services.
             </p>
             <div className="img_box">
               <StateSharingDetailMotion />
@@ -81,30 +82,55 @@ const Products: NextPage = () => {
               Document
             </strong>
             <p className="sub_desc">
-              Yorkie provides a general-purpose JSON-like <Link href="/docs/js-sdk#document">document</Link> to enable complex application models while some CRDT libraries that only offer basic data types.
+              Yorkie provides a general-purpose JSON-like <Link href="/docs/js-sdk#document">document</Link> to enable
+              complex application models while some CRDT libraries that only offer basic data types.
             </p>
             <div className="db_content">
               <CodeBlock.Wrapper>
                 <CodeBlockHeader>
                   <CodeBlockHeader.LeftBox>
-                    <button type="button" className="btn_item">
-                      Object
+                    <button
+                      type="button"
+                      className={classNames('btn_item', { is_active: documentType === 'common' })}
+                      onClick={() => {
+                        setDocumentType('common');
+                      }}
+                    >
+                      Common
                     </button>
-                    <button type="button" className="btn_item is_active">
+                    <button
+                      type="button"
+                      className={classNames('btn_item', { is_active: documentType === 'text' })}
+                      onClick={() => {
+                        setDocumentType('text');
+                      }}
+                    >
                       Text
                     </button>
-                    <button type="button" className="btn_item">
+                    <button
+                      type="button"
+                      className={classNames('btn_item', { is_active: documentType === 'richText' })}
+                      onClick={() => {
+                        setDocumentType('richText');
+                      }}
+                    >
                       RichText
                     </button>
-                    <button type="button" className="btn_item">
+                    <button
+                      type="button"
+                      className={classNames('btn_item', { is_active: documentType === 'counter' })}
+                      onClick={() => {
+                        setDocumentType('counter');
+                      }}
+                    >
                       Counter
                     </button>
                   </CodeBlockHeader.LeftBox>
                   <CodeBlockHeader.RightBox>
-                    <CodeBlockHeader.CopyButton value={textCode} />
+                    <CodeBlockHeader.CopyButton value={DOCUMENT_CODE[documentType]} />
                   </CodeBlockHeader.RightBox>
                 </CodeBlockHeader>
-                <CodeBlock code={textCode} language="javascript" withLineNumbers />
+                <CodeBlock code={DOCUMENT_CODE[documentType]} language="javascript" withLineNumbers />
               </CodeBlock.Wrapper>
               <div className="img_box">
                 <FlexibleDocumentMotion />
@@ -116,7 +142,8 @@ const Products: NextPage = () => {
               <a href="#collaboration-awareness">Presence</a>
             </strong>
             <p className="sub_desc">
-              You can build a sense of presence by tracking the status of users who are editing the same document with Presence.
+              You can build a sense of presence by tracking the status of users who are editing the same document with
+              Presence.
             </p>
             <div className="img_group">
               <div className="img_box">
@@ -135,19 +162,23 @@ const Products: NextPage = () => {
               <li className="product_card_item">
                 <strong className="product_card_title">SDKs for Mobile &amp; Web</strong>
                 <p className="product_card_desc">
-                  Yorkie SDKs support development for <Link href="/docs/ios-sdk">iOS</Link>, <Link href="/docs/android-sdk">Android</Link> and <Link href="/docs/js-sdk">Web</Link> applications.
+                  Yorkie SDKs support development for <Link href="/docs/ios-sdk">iOS</Link>,{' '}
+                  <Link href="/docs/android-sdk">Android</Link> and <Link href="/docs/js-sdk">Web</Link> applications.
                 </p>
               </li>
               <li className="product_card_item">
                 <strong className="product_card_title">Size optimization</strong>
                 <p className="product_card_desc">
-                  Yorkie uses <Link href="/docs/internals#garbage-collection">Garbage Collection</Link> and <a href="https://en.wikipedia.org/wiki/Lamport_timestamp">Lamport timestamps</a> to reduce the size of documents.
+                  Yorkie uses <Link href="/docs/internals#garbage-collection">Garbage Collection</Link> and
+                  <a href="https://en.wikipedia.org/wiki/Lamport_timestamp">Lamport timestamps</a> to reduce the size of
+                  documents.
                 </p>
               </li>
               <li className="product_card_item">
                 <strong className="product_card_title">Security</strong>
                 <p className="product_card_desc">
-                  <Link href="/docs/project#auth-webhook">Auth Webhook</Link> allows users to verify the authorization of clients to access documents from an external service.
+                  <Link href="/docs/project#auth-webhook">Auth Webhook</Link> allows users to verify the authorization
+                  of clients to access documents from an external service.
                 </p>
               </li>
             </ul>
@@ -168,7 +199,9 @@ const Products: NextPage = () => {
             <Icon type="cloud" />
             Dashboard
           </strong>
-          <p className="sub_big_desc">Dashboard in Cloud is accessible from any device without the need for installation.</p>
+          <p className="sub_big_desc">
+            Dashboard in Cloud is accessible from any device without the need for installation.
+          </p>
           <div className="house_content">
             <div className="img_box shadow_l img_pc">
               <ProductPCSVG />
@@ -203,7 +236,8 @@ const Products: NextPage = () => {
               <span className="text">How to build self-hosted server</span>
             </Link>
             <p className="sub_big_desc">
-              Yorkie open-source package includes SDKs, a server, and a database, making it easy to implement the co-editing feature.
+              Yorkie open-source package includes SDKs, a server, and a database, making it easy to implement the
+              co-editing feature.
             </p>
             <div className="img_box">
               <ProductPackageSVG />