diff --git a/src/components/side/Ad.tsx b/src/components/side/Ad.tsx
index 39b8b878..4e49edd5 100644
--- a/src/components/side/Ad.tsx
+++ b/src/components/side/Ad.tsx
@@ -11,8 +11,30 @@ interface Props {
   className?: string;
 }
 
-export default function Ad(props: Props) {
+interface RewardAdContentProps {
+  data: AdvertItem;
+}
+
+interface ImageAdContentProps {
+  data: AdvertItem;
+  handleClose: MouseEventHandler<HTMLDivElement>;
+}
+
+const ImageAdContent = ({ data, handleClose }: ImageAdContentProps) => (
+  <div className='group relative h-full'>
+    <img className='h-full w-full' src={data.image_url} alt='ad' />
+    <div
+      className='absolute top-0 right-0 hidden cursor-pointer p-1.5 text-inherit opacity-30 group-hover:block'
+      onClick={handleClose}
+    >
+      <VscClose size={20} />
+    </div>
+  </div>
+);
+
+export default function Ad({ data, className }: Props) {
   const [visible, setVisible] = useState(true);
+
   const handleClose: MouseEventHandler<HTMLDivElement> = (e) => {
     e.preventDefault();
     setVisible(false);
@@ -22,95 +44,80 @@ export default function Ad(props: Props) {
     redirectRecord('', aid, 'ad');
   };
 
+  if (!visible) return null;
+
+  const ProgressBar = ({ percent }: { percent: number }) => (
+    <div className='flex h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700'>
+      <div
+        className='flex flex-col justify-center overflow-hidden bg-blue-500'
+        style={{ width: `${percent}%` }}
+      />
+    </div>
+  );
+
+  const AdTargetInfo = ({ data }: { data: AdvertItem }) => (
+    <div className='mt-1.5 mb-1 text-xs text-gray-500'>
+      <span>
+        {data.year ? '距离下个目标还差' : '距离目标还差'}
+        <strong className='mx-1'>{100 - data.percent}%</strong>
+      </span>
+      <ProgressBar percent={data.percent} />
+    </div>
+  );
+
+  const AdServerInfo = ({ data }: { data: AdvertItem }) => (
+    <div className='mt-1.5 mb-1 text-xs text-gray-500'>
+      <span>
+        服务器还剩<strong className='mx-1'>{data.day}</strong>天
+      </span>
+      <div className='relative left-0.5 bottom-1 inline-flex w-fit'>
+        <span className='text-xs font-medium text-blue-500'>
+          <span className='mr-[0.5px]'>+{data.year}</span>年
+        </span>
+      </div>
+      <ProgressBar percent={data.percent} />
+    </div>
+  );
+
+  const RewardAdDetail = ({ data }: { data: AdvertItem }) => (
+    <>
+      <div className='group-hover:hidden'>
+        <AdServerInfo data={data} />
+      </div>
+      <div className='hidden group-hover:block'>
+        <AdTargetInfo data={data} />
+      </div>
+    </>
+  );
+
+  const RewardAdContent = ({ data }: RewardAdContentProps) => (
+    <div className='group flex flex-row p-3'>
+      <img className='h-[55px] w-[55px]' src={data.image_url} alt='ad' />
+      <div className='ml-3'>
+        <div className='font-medium tracking-wider md:text-sm lg:w-[135px] lg:truncate lg:whitespace-nowrap lg:text-base'>
+          微信扫码赞助本站
+        </div>
+        <div className='hidden lg:block'>
+          <RewardAdDetail data={data} />
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <div
-      className={`${props.className} relative h-20 overflow-hidden rounded-lg bg-white dark:bg-gray-800`}
-      hidden={!visible}
+      className={`relative h-20 overflow-hidden rounded-lg bg-white dark:bg-gray-800 ${className}`}
     >
-      <Link href={props.data.url}>
+      <Link href={data.url}>
         <a
           target='_blank'
-          onClick={() => onClickLink(props.data.aid)}
+          onClick={() => onClickLink(data.aid)}
           rel='noreferrer'
         >
-          {props.data.is_reward ? (
-            <div className='group flex flex-row p-3'>
-              <img
-                className='h-[55px] w-[55px]'
-                src={props.data.image_url}
-                alt='ad'
-              />
-              <div className='ml-3'>
-                <div className='font-medium tracking-wider md:text-sm lg:w-[135px] lg:truncate lg:whitespace-nowrap lg:text-base'>
-                  微信扫码赞助本站
-                </div>
-                <div className='hidden lg:block'>
-                  <div className='group-hover:hidden'>
-                    <div className='mt-1.5 mb-1 text-xs text-gray-500'>
-                      <span>
-                        服务器还剩
-                        <strong className='mx-1'>{props.data.day}</strong>天
-                      </span>
-                      <div className='relative left-0.5 bottom-1 inline-flex w-fit'>
-                        <span className='text-xs font-medium text-blue-500 '>
-                          <span className='mr-[0.5px]'>+{props.data.year}</span>
-                          年
-                        </span>
-                      </div>
-                    </div>
-                    <div className='flex h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700'>
-                      <div
-                        className='flex flex-col justify-center overflow-hidden bg-blue-500'
-                        style={{
-                          width: `${props.data.percent}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                  <div className='hidden group-hover:block'>
-                    <div className='mt-1.5 mb-1 text-xs text-gray-500'>
-                      {props.data.year ? (
-                        <span>
-                          距离下个目标还差
-                          <strong className='mx-1'>
-                            {100 - props.data.percent}%
-                          </strong>
-                        </span>
-                      ) : (
-                        <span>
-                          距离目标还差
-                          <strong className='mx-1'>
-                            {100 - props.data.percent}%
-                          </strong>
-                        </span>
-                      )}
-                    </div>
-                    <div className='flex h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700'>
-                      <div
-                        className='flex flex-col justify-center overflow-hidden bg-blue-500'
-                        style={{
-                          width: `${props.data.percent}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+          {data.is_reward ? (
+            <RewardAdContent data={data} />
           ) : (
-            <div className='group relative h-full'>
-              <img
-                className='h-full w-full'
-                src={props.data.image_url}
-                alt='ad'
-              />
-              <div
-                className='absolute top-0 right-0 hidden cursor-pointer p-1.5 text-inherit opacity-30 group-hover:block'
-                onClick={handleClose}
-              >
-                <VscClose size={20} />
-              </div>
-            </div>
+            <ImageAdContent data={data} handleClose={handleClose} />
           )}
         </a>
       </Link>
diff --git a/src/components/side/Recommend.tsx b/src/components/side/Recommend.tsx
index 8cc4642d..7f9eaf20 100644
--- a/src/components/side/Recommend.tsx
+++ b/src/components/side/Recommend.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { AiOutlineStar } from 'react-icons/ai';
 import { MdRefresh } from 'react-icons/md';
 
@@ -8,30 +8,70 @@ import { getRecommend } from '@/services/home';
 
 import { RecommendSkeleton } from '../loading/skeleton';
 
-import { RecomemndItem } from '@/types/home';
+import { RecommendItem } from '@/types/home';
+
+const RecommendList = ({ repositories }: { repositories: RecommendItem[] }) => (
+  <div className='dark:text-gray-300'>
+    {repositories.map((item) => (
+      <Link prefetch={false} href={`/repository/${item.rid}/`} key={item.rid}>
+        <div className='flex cursor-pointer flex-row rounded-md py-2 hover:bg-gray-50 hover:text-blue-400 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-blue-400'>
+          <div className='flex w-full items-center px-1'>
+            <img
+              className='w-10 rounded-full border border-gray-100 dark:border-gray-900'
+              src={item.author_avatar}
+              width='40'
+              height='40'
+              alt='repo_avatar'
+            />
+            <div className='flex w-4/5 flex-col pl-2'>
+              <div className='truncate text-ellipsis text-sm capitalize'>
+                {item.full_name}
+              </div>
+              <div className='flex flex-row pt-1 text-xs text-gray-400'>
+                <div className='flex items-center pr-4'>
+                  <AiOutlineStar size={14} />
+                  <span className='pl-0.5'>{item.stars_str}</span>
+                </div>
+                <div className='truncate text-ellipsis'>
+                  <span
+                    style={{ backgroundColor: `${item.lang_color}` }}
+                    className='relative box-border inline-block h-3 w-3 rounded-full border border-gray-100 align-[-1.5px] dark:border-gray-600'
+                  ></span>
+                  <span className='whitespace-nowrap pl-0.5'>
+                    {item.primary_lang}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    ))}
+  </div>
+);
+
+const isLicenseDetailPath = (pathname: string) => pathname === '/license/[lid]';
 
 export default function Recommend() {
   const router = useRouter();
   const { pathname, query } = router;
-  const [repositories, setRepositories] = useState<RecomemndItem[]>([]);
 
-  const isLicenseDetail = useMemo(() => {
-    return pathname === '/license/[lid]';
-  }, [pathname]);
+  const [repositories, setRepositories] = useState<RecommendItem[]>([]);
 
-  const refreshRecommend = async () => {
+  const refreshRecommend = useCallback(async () => {
     setRepositories([]);
     const lid = query?.lid as string;
     const res = await getRecommend(lid);
     if (res?.success) {
       setRepositories(res.data);
     }
-  };
+  }, [query?.lid]);
 
   useEffect(() => {
-    // path 变化就会刷新推荐项目列表
     refreshRecommend();
-  }, [pathname]);
+  }, [pathname, refreshRecommend]);
+
+  const ShowIsLicenseDetail = isLicenseDetailPath(pathname);
 
   return (
     <>
@@ -48,53 +88,13 @@ export default function Recommend() {
             <span className='pl-0.5'>换一换</span>
           </div>
         </div>
-        {repositories.length == 0 ? (
+        {repositories.length === 0 ? (
           <RecommendSkeleton loop={3} />
         ) : (
-          <div className='dark:text-gray-300'>
-            {repositories.map((item) => (
-              <Link
-                prefetch={false}
-                href={`/repository/${item.rid}/`}
-                key={item.rid}
-              >
-                <div className='flex cursor-pointer flex-row rounded-md py-2 hover:bg-gray-50 hover:text-blue-400  dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-blue-400'>
-                  <div className='flex w-full items-center px-1'>
-                    <img
-                      className='w-10 rounded-full border border-gray-100 dark:border-gray-900'
-                      src={item.author_avatar}
-                      width='40'
-                      height='40'
-                      alt='repo_avatar'
-                    />
-                    <div className='flex w-4/5 flex-col pl-2'>
-                      <div className='truncate text-ellipsis text-sm capitalize'>
-                        {item.full_name}
-                      </div>
-                      <div className='flex flex-row pt-1 text-xs text-gray-400 '>
-                        <div className='flex items-center pr-4'>
-                          <AiOutlineStar size={14} />
-                          <span className='pl-0.5'>{item.stars_str}</span>
-                        </div>
-                        <div className='truncate text-ellipsis'>
-                          <span
-                            style={{ backgroundColor: `${item.lang_color}` }}
-                            className='relative box-border inline-block h-3 w-3 rounded-full border border-gray-100 align-[-1.5px] dark:border-gray-600'
-                          ></span>
-                          <span className='whitespace-nowrap pl-0.5'>
-                            {item.primary_lang}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Link>
-            ))}
-          </div>
+          <RecommendList repositories={repositories} />
         )}
       </div>
-      {isLicenseDetail && (
+      {ShowIsLicenseDetail && (
         <div className='space-y-1.5 rounded-lg bg-white px-4 pt-3 pb-2 text-sm dark:bg-gray-800'>
           内容整理自 spdx 和 GitHub 网站，并遵循
           <a
diff --git a/src/services/home.ts b/src/services/home.ts
index a8010dbc..008d5474 100644
--- a/src/services/home.ts
+++ b/src/services/home.ts
@@ -4,7 +4,7 @@ import { makeUrl } from '@/utils/api';
 
 import { fetcher } from './base';
 
-import { HomeItem, HomeItems, RecomemndItems, Stats } from '@/types/home';
+import { HomeItem, HomeItems, RecommendItems, Stats } from '@/types/home';
 import { TagItems } from '@/types/tag';
 
 export const getItems = async (
@@ -25,7 +25,7 @@ export const getRecommend = async (lid?: string): Promise<any> => {
     if (lid) {
       url = `/repository/recommend/?lid=${lid}`;
     }
-    const data = await fetcher<RecomemndItems>(makeUrl(url));
+    const data = await fetcher<RecommendItems>(makeUrl(url));
     return data;
   } catch (error) {
     console.error(error);
diff --git a/src/types/home.tsx b/src/types/home.tsx
index 22505289..73102cd9 100644
--- a/src/types/home.tsx
+++ b/src/types/home.tsx
@@ -34,7 +34,7 @@ export interface Stats {
   user_total: number;
 }
 
-export interface RecomemndItem {
+export interface RecommendItem {
   rid: string;
   name: string;
   full_name: string;
@@ -46,10 +46,10 @@ export interface RecomemndItem {
   stars_str: string;
 }
 
-export interface RecomemndItems {
+export interface RecommendItems {
   success: boolean;
   total: number;
-  data: RecomemndItem[];
+  data: RecommendItem[];
 }
 
 export interface AdvertItem {