diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 68dbc0b..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Link } from "@tanstack/react-router"
-import { useCallback } from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-import logo from "~/assets/react.svg"
-import { useDark } from "~/hooks/useDark"
-import { currentSectionAtom, refetchSourcesAtom } from "~/atoms"
-
-function ThemeToggle() {
-  const { toggleDark } = useDark()
-  return (
-    <button
-      type="button"
-      title="Toggle Dark Mode"
-      className="i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone btn-pure"
-      onClick={toggleDark}
-    />
-  )
-}
-
-function RefreshButton() {
-  const currentSection = useAtomValue(currentSectionAtom)
-  const setRefetchSource = useSetAtom(refetchSourcesAtom)
-  const refreshAll = useCallback(() => {
-    const obj = Object.fromEntries(currentSection.sourceList.map(id => [id, Date.now()]))
-    setRefetchSource(prev => ({
-      ...prev,
-      ...obj,
-    }))
-  }, [currentSection, setRefetchSource])
-
-  return (
-    <button type="button" className="i-ph:arrow-clockwise btn-pure" onClick={refreshAll} />
-  )
-}
-
-export function Header() {
-  return (
-    <header className="flex justify-between items-center">
-      <Link className="text-6 flex gap-2 items-center" to="/">
-        <img src={logo} alt="logo" className="h-8" />
-        <span className="font-mono">NewsNow</span>
-      </Link>
-      <div className="flex gap-2">
-        <RefreshButton />
-        <ThemeToggle />
-      </div>
-    </header>
-  )
-}
diff --git a/src/components/section/Card.tsx b/src/components/section/Card.tsx
deleted file mode 100644
index 8594afc..0000000
--- a/src/components/section/Card.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import type { NewsItem, SourceID, SourceInfo, SourceResponse } from "@shared/types"
-import { OverlayScrollbarsComponent } from "overlayscrollbars-react"
-import type { UseQueryResult } from "@tanstack/react-query"
-import { useQuery } from "@tanstack/react-query"
-import clsx from "clsx"
-import { useInView } from "react-intersection-observer"
-import { useAtom } from "jotai"
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"
-import { sources } from "@shared/data"
-import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"
-import { focusSourcesAtom, refetchSourcesAtom } from "~/atoms"
-import { useRelativeTime } from "~/hooks/useRelativeTime"
-
-export interface ItemsProps extends React.HTMLAttributes<HTMLDivElement> {
-  id: SourceID
-  /**
-   * 是否显示透明度，拖动时原卡片的样式
-   */
-  isDragged?: boolean
-  isOverlay?: boolean
-  handleListeners?: SyntheticListenerMap
-}
-
-interface NewsCardProps {
-  id: SourceID
-  inView: boolean
-  isOverlay?: boolean
-  handleListeners?: SyntheticListenerMap
-}
-
-interface Query {
-  query: UseQueryResult<SourceInfo, Error>
-}
-
-export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragged, isOverlay, handleListeners, style, ...props }, dndRef) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const { ref: inViewRef, inView } = useInView({
-    threshold: 0,
-  })
-
-  useImperativeHandle(dndRef, () => ref.current!)
-  useImperativeHandle(inViewRef, () => ref.current!)
-
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        "flex flex-col h-500px aspect-auto border border-gray-100 rounded-xl shadow-2xl shadow-gray-600/10 bg-base dark:( border-gray-700 shadow-none)",
-        isDragged && "op-50",
-        isOverlay ? "bg-glass" : "",
-      )}
-      style={{
-        transformOrigin: "50% 50%",
-        ...style,
-      }}
-      {...props}
-    >
-      <NewsCard id={id} inView={inView} isOverlay={isOverlay} handleListeners={handleListeners} />
-    </div>
-  )
-})
-
-export function NewsCard({ id, inView, isOverlay, handleListeners }: NewsCardProps) {
-  const [focusSources, setFocusSources] = useAtom(focusSourcesAtom)
-  const [refetchSource, setRefetchSource] = useAtom(refetchSourcesAtom)
-  const query = useQuery({
-    queryKey: [id, refetchSource[id]],
-    queryFn: async ({ queryKey }) => {
-      const [_id, _refetchTime] = queryKey as [SourceID, number]
-      let url = `/api/${_id}`
-      if (Date.now() - _refetchTime < 1000) {
-        url = `/api/${_id}?latest`
-      }
-      const response: SourceResponse = await fetch(url).then(res => res.json())
-      if (response.status === "error") {
-        throw new Error(response.message)
-      } else {
-        return response.data
-      }
-    },
-    // refetch 时显示原有的数据
-    placeholderData: prev => prev,
-    staleTime: 1000 * 60 * 5,
-    enabled: inView,
-  })
-
-  const addFocusList = useCallback(() => {
-    setFocusSources(focusSources.includes(id) ? focusSources.filter(i => i !== id) : [...focusSources, id])
-  }, [setFocusSources, focusSources, id])
-  const manualRefetch = useCallback(() => {
-    setRefetchSource(prev => ({
-      ...prev,
-      [id]: Date.now(),
-    }))
-  }, [setRefetchSource, id])
-
-  return (
-    <>
-      <div
-        {...handleListeners}
-        className={clsx([
-          "flex justify-between p-2 items-center",
-          handleListeners && "cursor-grab",
-          isOverlay && "cursor-grabbing",
-        ])}
-      >
-        <div className="flex items-center gap-2">
-          <img src={`/icons/${id.split("-")[0]}.png`} className="w-4 h-4 rounded" alt={id} onError={e => e.currentTarget.hidden = true} />
-          <span className="text-md font-bold">
-            {sources[id].name}
-          </span>
-        </div>
-        {/* @ts-expect-error -_- */}
-        <span className="text-xs">{sources[id]?.type}</span>
-      </div>
-      <OverlayScrollbarsComponent
-        defer
-        className="h-full pl-2 pr-3 mr-1"
-        element="div"
-        options={{ scrollbars: { autoHide: "scroll" }, overflow: { x: "hidden" } }}
-      >
-        <NewsList query={query} />
-      </OverlayScrollbarsComponent>
-      <div className="p-2 flex items-center justify-between">
-        <UpdateTime query={query} />
-        <div className="flex gap-1">
-          <button
-            type="button"
-            className={clsx("i-ph:arrow-clockwise", query.isFetching && "animate-spin")}
-            onClick={manualRefetch}
-          />
-          <button type="button" className={clsx(focusSources.includes(id) ? "i-ph:star-fill" : "i-ph:star", "color-primary")} onClick={addFocusList} />
-        </div>
-      </div>
-    </>
-  )
-}
-
-function UpdateTime({ query }: Query) {
-  const updatedTime = useRelativeTime(query.data?.updatedTime ?? "")
-  if (updatedTime) return <span>{`${updatedTime}更新`}</span>
-  if (query.isError) return <span>获取失败</span>
-  return <span className="skeleton w-20" />
-}
-
-function Num({ num }: { num: number }) {
-  const color = ["bg-red-900", "bg-red-500", "bg-red-400"]
-  return (
-    <span className={clsx("bg-active min-w-6 flex justify-center items-center rounded-md", false && color[num - 1])}>
-      {num}
-    </span>
-  )
-}
-
-function ExtraInfo({ item }: { item: NewsItem }) {
-  const relativeTime = useRelativeTime(item?.extra?.date)
-  if (relativeTime) {
-    return <>{relativeTime}</>
-  }
-
-  if (item?.extra?.icon) {
-    return (
-      <img src={item.extra.icon} className="w-5 inline" />
-    )
-  }
-}
-
-function NewsList({ query }: Query) {
-  const items = query.data?.items
-  if (items?.length) {
-    return (
-      <>
-        {items.slice(0, 20).map((item, i) => (
-          <div key={item.title} className="flex gap-2 items-center">
-            <Num num={i + 1} />
-            <a href={item.url} target="_blank" className="my-1">
-              <span className="mr-2">
-                {item.title}
-              </span>
-              <span className="text-xs text-gray-4/80 truncate align-middle">
-                <ExtraInfo item={item} />
-              </span>
-            </a>
-          </div>
-        ))}
-      </>
-    )
-  }
-  return (
-    <>
-      {Array.from({ length: 20 }).map((_, i) => i).map(i => (
-        <div key={i} className="flex gap-2 items-center">
-          <Num num={i + 1} />
-          <span className="skeleton border-b border-gray-300/20 my-1"></span>
-        </div>
-      ))}
-    </>
-  )
-}
diff --git a/src/components/section/Dnd.tsx b/src/components/section/Dnd.tsx
deleted file mode 100644
index a4372a4..0000000
--- a/src/components/section/Dnd.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useCallback, useState } from "react"
-import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core"
-import {
-  DndContext,
-  DragOverlay,
-  MouseSensor,
-  TouchSensor,
-  closestCenter,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core"
-import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from "@dnd-kit/sortable"
-import { useAtom } from "jotai"
-import type { SourceID } from "@shared/types"
-import { CSS } from "@dnd-kit/utilities"
-import type { ItemsProps } from "./card"
-import { CardWrapper } from "./card"
-import { focusSourcesAtom } from "~/atoms"
-
-export function Dnd() {
-  const [items, setItems] = useAtom(focusSourcesAtom)
-  const [activeId, setActiveId] = useState<string | null>(null)
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor))
-
-  const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string)
-  }, [])
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const { active, over } = event
-
-    if (active.id !== over?.id) {
-      setItems((items) => {
-        const oldIndex = items.indexOf(active.id as any)
-        const newIndex = items.indexOf(over!.id as any)
-
-        return arrayMove(items, oldIndex, newIndex)
-      })
-    }
-
-    setActiveId(null)
-  }, [setItems])
-  const handleDragCancel = useCallback(() => {
-    setActiveId(null)
-  }, [])
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragCancel={handleDragCancel}
-    >
-      <SortableContext items={items} strategy={rectSortingStrategy}>
-        {items.map(id => (
-          <SortableCardWrapper key={id} id={id} />
-        ))}
-      </SortableContext>
-      <DragOverlay adjustScale style={{ transformOrigin: "0 0 " }}>
-        {!!activeId && <CardWrapper id={activeId as SourceID} isOverlay />}
-      </DragOverlay>
-    </DndContext>
-  )
-}
-
-function SortableCardWrapper({ id, ...props }: ItemsProps) {
-  const {
-    isDragging,
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-  } = useSortable({ id })
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  }
-
-  return (
-    <CardWrapper
-      ref={setNodeRef}
-      id={id}
-      style={style}
-      isDragged={isDragging}
-      handleListeners={listeners}
-      {...attributes}
-      {...props}
-    />
-  )
-}