diff --git a/components/FamousTemplate.tsx b/components/FamousTemplate.tsx
index 961e69a..8ec7c73 100644
--- a/components/FamousTemplate.tsx
+++ b/components/FamousTemplate.tsx
@@ -8,6 +8,7 @@ import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
 import { useAppDispatch } from "@/lib/store/hooks"
 import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
+import { useDeviceType } from "@/hooks/useDeviceType"
 
 /**
  * A compact template showcase with a header and link to all templates.
@@ -17,6 +18,7 @@ import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
 const FamousTemplate: React.FC = () => {
   const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook()
   const dispatch = useAppDispatch()
+  const { isDesktop } = useDeviceType()
 
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined)
@@ -41,11 +43,11 @@ const FamousTemplate: React.FC = () => {
 
   return (
     <section data-alt="famous-template" className="w-full">
-      <div data-alt="famous-template-header" className="mb-4 flex items-center">
+      <div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
           Hot Templates
         </h2>
-        <div data-alt="template-tabs" className="flex flex-wrap items-center gap-2 ml-4">
+        <div data-alt="template-tabs" className={`flex flex-wrap items-center gap-2 ${isDesktop ? 'ml-4' : 'ml-0'}`}>
           {(["all", "music", "animation", "fantasy"] as const).map((tab) => (
             <button
               key={tab}