diff --git a/app/g/[id]/page.tsx b/app/g/[id]/page.tsx
index f5682bf..3765a08 100644
--- a/app/g/[id]/page.tsx
+++ b/app/g/[id]/page.tsx
@@ -33,7 +33,7 @@ export default async function Page({
           priority
           width={32}
           height={32}
-          className="rounded-lg-full "
+          className="rounded-full "
         />
         <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis">
           <Link href="/gists">
diff --git a/app/g/loading.tsx b/app/g/loading.tsx
index 024c1bf..2abf397 100644
--- a/app/g/loading.tsx
+++ b/app/g/loading.tsx
@@ -7,7 +7,7 @@ const loading = () => {
       <div className="flex items-center py-1 ">
         <div
           className={clsx(
-            'w-8 h-8 rounded-lg-full',
+            'w-8 h-8 rounded-full',
             'bg-gray-200 animate-pulse dark:bg-rua-gray-600',
           )}
         ></div>
@@ -21,7 +21,7 @@ const loading = () => {
           <div
             className={clsx(
               'w-32 h-5 bg-gray-200',
-              'animate-pulse rounded-lg-md',
+              'animate-pulse rounded-lg',
               'dark:bg-rua-gray-600',
             )}
           ></div>
@@ -29,7 +29,7 @@ const loading = () => {
           <div
             className={clsx(
               'w-32 h-5 bg-gray-200',
-              'animate-pulse rounded-lg-md',
+              'animate-pulse rounded-lg',
               'dark:bg-rua-gray-600',
             )}
           ></div>
@@ -40,7 +40,7 @@ const loading = () => {
         <div
           className={clsx(
             'w-32 h-4 bg-gray-200',
-            'animate-pulse rounded-lg-md',
+            'animate-pulse rounded-lg',
             'dark:bg-rua-gray-600',
           )}
         ></div>
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index 154f928..dbf2d2d 100644
--- a/app/p/[slug]/page.tsx
+++ b/app/p/[slug]/page.tsx
@@ -11,7 +11,6 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import { Post } from 'types';
-import 'styles/rua.css';
 
 const PostToc = dynamic(() => import('components/post/post-toc'));
 const PostCommnetLine = dynamic(
diff --git a/app/page.tsx b/app/page.tsx
index 569ea58..9ee2056 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,24 +12,23 @@ export const metadata = {
 export default function Page() {
   return (
     <main className="flex items-stretch justify-center flex-1 text-xl">
-      <div className="flex flex-col w-full max-w-4xl px-4 py-24 text-2xl">
-        <h1 className="flex pb-4 text-5xl">
-          <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
-            Hi there
-          </span>
-          <span className="ml-3">
-            <Image
-              src="/images/img/hands.svg"
-              alt="hands"
-              width={36}
-              height={36}
-            />
-          </span>
-        </h1>
-
-        <div className="relative flex flex-1 w-full h-full">
-          <HomeModel />
-        </div>
+      <div className="text-6xl flex items-center">
+        <span
+          className={clsx(
+            'font-semibold font-Lobster tracking-wide',
+            styles.gradient,
+          )}
+        >
+          Hello World!
+        </span>
+        <span className="ml-3">
+          <Image
+            src="/images/img/hands.svg"
+            alt="hands"
+            width={36}
+            height={36}
+          />
+        </span>
       </div>
     </main>
   );
diff --git a/components/models/cloud-model.tsx b/components/models/cloud-model.tsx
index d6974f5..4f27009 100644
--- a/components/models/cloud-model.tsx
+++ b/components/models/cloud-model.tsx
@@ -27,17 +27,11 @@ const CloudModel = () => {
   };
   const [_, api] = useSpring(
     {
-      from: {
-        z: camera.position.z,
-      },
+      z: camera.position.z,
       config: {
         duration: 1200,
         easing: easings.easeOutCirc,
       },
-      to: {
-        z: camera.position.z - 5.2,
-      },
-      pause: true,
       onChange: (e) => {
         camera.position.z = Number(e.value.z);
       },
@@ -78,7 +72,9 @@ const CloudModel = () => {
     window.addEventListener('touchmove', moveHandler);
 
     setTimeout(() => {
-      api.resume();
+      api.start({
+        z: camera.position.z - 5.2,
+      });
       setDarkMode();
     }, 1000);
 
diff --git a/components/pages/blog/post-card-loading.tsx b/components/pages/blog/post-card-loading.tsx
index 4bebe59..862dc4e 100644
--- a/components/pages/blog/post-card-loading.tsx
+++ b/components/pages/blog/post-card-loading.tsx
@@ -5,7 +5,7 @@ const PostCardLoading = () => {
   return (
     <article
       className={clsx(
-        'rounded-lg-xl py-4 px-5 md:p-7 ',
+        'rounded-lg py-4 px-5 md:p-7 ',
         'hover:bg-sky-100 hover:bg-opacity-50',
         'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
         'flex justify-between text-gray-800 ',
diff --git a/components/pages/blog/post-card.tsx b/components/pages/blog/post-card.tsx
index de202b3..f38ec65 100644
--- a/components/pages/blog/post-card.tsx
+++ b/components/pages/blog/post-card.tsx
@@ -13,13 +13,13 @@ const PostCard = ({ post }: Props) => {
       <Link href={`/p/${post.slug}`} passHref>
         <article
           className={clsx(
-            'rounded-lg-xl py-4 px-5 md:p-7 ',
+            'rounded-lg py-4 px-5 md:p-7 ',
             'hover:bg-sky-100 hover:bg-opacity-50',
             // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
             'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
             'flex justify-between text-gray-800',
             'mb-4 dark:text-gray-200',
-            'flex-col',
+            'flex-col transition-all duration-300',
           )}
         >
           <div className="flex justify-between">
diff --git a/components/pages/dark-mode-btn.tsx b/components/pages/dark-mode-btn.tsx
index 3bc2ab5..f9d23ad 100644
--- a/components/pages/dark-mode-btn.tsx
+++ b/components/pages/dark-mode-btn.tsx
@@ -42,7 +42,7 @@ const DarkModeBtn = () => {
       <button>
         <div
           className={clsx(
-            'w-5 h-5 rounded-lg-md animate-pulse',
+            'w-5 h-5 rounded-md animate-pulse',
             'bg-gray-300 dark:bg-gray-500',
           )}
         ></div>
diff --git a/components/pages/friends/friend-card.tsx b/components/pages/friends/friend-card.tsx
index c2bf051..543c952 100644
--- a/components/pages/friends/friend-card.tsx
+++ b/components/pages/friends/friend-card.tsx
@@ -7,7 +7,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
     <a href={friend.link} target="_blank">
       <div
         className={clsx(
-          'py-3 px-4 rounded-lg-xl bg-slate-100',
+          'py-3 px-4 rounded-lg bg-slate-100',
           'hover:bg-slate-200',
           'transition-all duration-300',
           'flex items-center cursor-pointer',
diff --git a/components/pages/gists/gists-code-skeleton.tsx b/components/pages/gists/gists-code-skeleton.tsx
index 7ba8913..e47c2b3 100644
--- a/components/pages/gists/gists-code-skeleton.tsx
+++ b/components/pages/gists/gists-code-skeleton.tsx
@@ -22,21 +22,21 @@ const GistsCode = () => {
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-lg-full bg-[#ce5347]',
+                'rounded-lg bg-[#ce5347]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-lg-full bg-[#d6a243]',
+                'rounded-lg bg-[#d6a243]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px]',
-                'rounded-lg-full bg-[#58a942]',
+                'rounded-lg bg-[#58a942]',
               )}
             ></div>
           </div>
diff --git a/components/pages/gists/gists-code.tsx b/components/pages/gists/gists-code.tsx
index bec0929..dcf056f 100644
--- a/components/pages/gists/gists-code.tsx
+++ b/components/pages/gists/gists-code.tsx
@@ -47,21 +47,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-lg-full bg-[#ce5347]',
+                  'rounded-full bg-[#ce5347]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-lg-full bg-[#d6a243]',
+                  'rounded-full bg-[#d6a243]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px]',
-                  'rounded-lg-full bg-[#58a942]',
+                  'rounded-full bg-[#58a942]',
                 )}
               ></div>
             </div>
diff --git a/components/pages/gists/gists-skeleton.tsx b/components/pages/gists/gists-skeleton.tsx
index 9399b53..cd94028 100644
--- a/components/pages/gists/gists-skeleton.tsx
+++ b/components/pages/gists/gists-skeleton.tsx
@@ -8,7 +8,7 @@ const GistSkeleton = () => {
           <div className="flex items-center py-1 ">
             <div
               className={clsx(
-                'w-8 h-8 rounded-lg-full',
+                'w-8 h-8 rounded-lg',
                 'animate-pulse bg-gray-300',
                 'dark:bg-gray-400 ',
               )}
diff --git a/components/pages/gists/user-info-skeleton.tsx b/components/pages/gists/user-info-skeleton.tsx
index d2c6116..95546b5 100644
--- a/components/pages/gists/user-info-skeleton.tsx
+++ b/components/pages/gists/user-info-skeleton.tsx
@@ -15,7 +15,7 @@ const UserInfoLoading = () => {
           <div
             className={clsx(
               'w-16 h-16 mr-4 overflow-hidden',
-              'md:w-72 md:h-72 bg-gray-200 rounded-lg-full',
+              'md:w-72 md:h-72 bg-gray-200 rounded-lg',
               'animate-pulse dark:bg-rua-gray-800',
             )}
           ></div>
diff --git a/components/pages/gists/user-info.tsx b/components/pages/gists/user-info.tsx
index e49aff6..394d92a 100644
--- a/components/pages/gists/user-info.tsx
+++ b/components/pages/gists/user-info.tsx
@@ -27,7 +27,7 @@ const UserInfo = async () => {
               src={avatar}
               alt="Avatar"
               priority
-              className="rounded-lg-full"
+              className="rounded-full"
             />
           </div>
 
diff --git a/components/pages/nav-bar.tsx b/components/pages/nav-bar.tsx
index edbcd3b..a669b92 100644
--- a/components/pages/nav-bar.tsx
+++ b/components/pages/nav-bar.tsx
@@ -90,7 +90,7 @@ const HeadBar = () => {
             className={clsx(
               'font-semibold',
               'text-3xl tracking-widest',
-              'select-none',
+              'select-none font-Lobster',
             )}
           >
             RUA!
@@ -106,7 +106,7 @@ const HeadBar = () => {
         <nav
           className={clsx(
             'text-lg md:block',
-            'bg-white rounded-lg-md',
+            'bg-white rounded-lg',
             'dark:bg-rua-gray-800',
             'absolute md:static',
             'p-5 right-6 top-14',
@@ -154,7 +154,7 @@ const HeadBar = () => {
                 <div
                   className={clsx(
                     'w-[164.453px] h-[30px]',
-                    'bg-[#ebedf0] rounded-lg-[40px] animate-pulse',
+                    'bg-[#ebedf0] rounded-[40px] animate-pulse',
                   )}
                 ></div>
               )}
diff --git a/components/post/copy-button.tsx b/components/post/copy-button.tsx
index e1932ad..dda4bd3 100644
--- a/components/post/copy-button.tsx
+++ b/components/post/copy-button.tsx
@@ -24,7 +24,7 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           ref={ref}
           className={clsx(
             'flex items-center justify-center',
-            'border rounded-lg-md',
+            'border rounded-lg',
             'p-[6px] opacity-0',
             'group-hover:opacity-100',
             'transition-opacity dark:border-gray-700',
diff --git a/components/rua/rua-sandpack.tsx b/components/rua/rua-sandpack.tsx
index ef0d56b..34bf037 100644
--- a/components/rua/rua-sandpack.tsx
+++ b/components/rua/rua-sandpack.tsx
@@ -14,7 +14,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   if (!mounted) {
     return (
-      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           options={{
@@ -29,7 +29,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   return (
     <>
-      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           theme={
diff --git a/components/rua/tab/index.tsx b/components/rua/tab/index.tsx
index 9c273d4..a3e2ee8 100644
--- a/components/rua/tab/index.tsx
+++ b/components/rua/tab/index.tsx
@@ -38,7 +38,7 @@ const Tab = ({ defaultValue, children }: Props) => {
               key={child.props.label}
               onClick={() => handleSwitch(child.props.value)}
               className={clsx(
-                'px-5 py-3 rounded-lg-t-lg',
+                'px-5 py-3 rounded-t-lg',
                 child.props.value === currentValue &&
                   'text-teal-500 border-b-[3px] border-teal-500',
                 'select-none cursor-pointer',