diff --git a/.env b/.env
index dc5c88f..6efe19b 100644
--- a/.env
+++ b/.env
@@ -6,4 +6,7 @@ NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
 NEXT_PUBLIC_LARK_APP_ID = cli_a8094a652022900d
 NEXT_PUBLIC_LARK_WIKI_URL = https://open-source-bazaar.feishu.cn/wiki/space/7052192153363054596
 
+NEXT_PUBLIC_LARK_BITABLE_ID = PNOGbGqhPacsHOsvJqHctS77nje
+NEXT_PUBLIC_ACTIVITY_TABLE_ID = tblREEMxDOECZZrK
+
 NEXT_PUBLIC_STRAPI_API_HOST = https://china-ngo-db.onrender.com/api/
diff --git a/components/Activity/Card.tsx b/components/Activity/Card.tsx
new file mode 100644
index 0000000..ee6b122
--- /dev/null
+++ b/components/Activity/Card.tsx
@@ -0,0 +1,76 @@
+import { TimeDistance } from 'idea-react';
+import { TableCellLocation } from 'mobx-lark';
+import type { FC } from 'react';
+import { Card, Col, Row } from 'react-bootstrap';
+
+import { type Activity, ActivityModel } from '../../models/Activity';
+import { LarkImage } from '../LarkImage';
+import { TimeOption } from '../data';
+import { BadgeBar } from 'mobx-restful-table';
+
+export interface ActivityCardProps extends Activity {
+  className?: string;
+}
+
+export const ActivityCard: FC<ActivityCardProps> = ({
+  className = '',
+  id,
+  host,
+  name,
+  startTime,
+  city,
+  location,
+  image,
+  ...activity
+}) => (
+  <Card
+    className={`shadow-sm ${className}`}
+    style={{ contentVisibility: 'auto', containIntrinsicHeight: '23rem' }}
+  >
+    <div className="position-relative w-100" style={{ paddingBottom: '56%' }}>
+      <div className="position-absolute top-0 left-0 w-100 h-100">
+        <LarkImage
+          className="card-img-top h-100 object-fit-cover"
+          style={{ objectPosition: 'top left' }}
+          src={image}
+        />
+      </div>
+    </div>
+    <Card.Body className="d-flex flex-column">
+      <Card.Title as="h3" className="h5 flex-fill">
+        <a
+          className="text-decoration-none text-secondary text-truncate-lines"
+          href={ActivityModel.getLink({ id, ...activity })}
+        >
+          {name as string}
+        </a>
+      </Card.Title>
+
+      <Row className="mt-2 flex-fill">
+        <Col className="text-start">
+          <Card.Text
+            className="mt-1 text-truncate"
+            title={(location as TableCellLocation)?.full_address}
+          >
+            <span className="me-1">{city as string}</span>
+
+            {(location as TableCellLocation)?.full_address}
+          </Card.Text>
+        </Col>
+      </Row>
+      <Row as="footer" className="flex-fill small mt-1">
+        <Col xs={8}>
+          <BadgeBar
+            list={(host as string[]).map(text => ({
+              text,
+              link: `/search/activity?keywords=${text}`,
+            }))}
+          />
+        </Col>
+        <Col className="text-end" xs={4}>
+          <TimeDistance {...TimeOption} date={startTime as number} />
+        </Col>
+      </Row>
+    </Card.Body>
+  </Card>
+);
diff --git a/components/Navigator/MainNavigator.tsx b/components/Navigator/MainNavigator.tsx
index 8894306..76b0824 100644
--- a/components/Navigator/MainNavigator.tsx
+++ b/components/Navigator/MainNavigator.tsx
@@ -6,6 +6,7 @@ import { Container, Image, Nav, Navbar, NavDropdown } from 'react-bootstrap';
 
 import { DefaultImage } from '../../models/configuration';
 import { i18n, I18nContext } from '../../models/Translation';
+import { SearchBar } from './SearchBar';
 
 const LanguageMenu = dynamic(() => import('./LanguageMenu'), { ssr: false });
 
@@ -107,7 +108,10 @@ export const MainNavigator: FC<MainNavigatorProps> = observer(({ menu }) => {
             )}
           </Nav>
 
-          <LanguageMenu />
+          <div className="d-flex justify-content-around gap-3">
+            <SearchBar />
+            <LanguageMenu />
+          </div>
         </Navbar.Collapse>
       </Container>
     </Navbar>
diff --git a/components/Navigator/SearchBar.tsx b/components/Navigator/SearchBar.tsx
index e6406aa..dc8727f 100644
--- a/components/Navigator/SearchBar.tsx
+++ b/components/Navigator/SearchBar.tsx
@@ -13,18 +13,16 @@ import { I18nContext } from '../../models/Translation';
 import styles from './SearchBar.module.less';
 
 export interface SearchBarProps
-  extends Omit<FormProps, 'onChange'>,
+  extends
+    Omit<FormProps, 'onChange'>,
     Pick<InputGroupProps, 'size'>,
-    Pick<
-      FormControlProps,
-      'name' | 'placeholder' | 'defaultValue' | 'value' | 'onChange'
-    > {
+    Pick<FormControlProps, 'name' | 'placeholder' | 'defaultValue' | 'value' | 'onChange'> {
   expanded?: boolean;
 }
 
 export const SearchBar: FC<SearchBarProps> = observer(
   ({
-    action = '/search',
+    action = '/search/activity',
     size,
     name = 'keywords',
     placeholder,
diff --git a/components/PageContent/PageContent.module.scss b/components/PageContent/PageContent.module.less
similarity index 100%
rename from components/PageContent/PageContent.module.scss
rename to components/PageContent/PageContent.module.less
diff --git a/components/PageContent/index.tsx b/components/PageContent/index.tsx
index f3b4f1b..b9d68cd 100644
--- a/components/PageContent/index.tsx
+++ b/components/PageContent/index.tsx
@@ -2,8 +2,8 @@ import { MDXProvider } from '@mdx-js/react';
 import type { FC, PropsWithChildren } from 'react';
 import { Card, Container } from 'react-bootstrap';
 
-import styles from '../../styles/Home.module.scss';
-import pageContentStyles from './PageContent.module.scss';
+import styles from '../../styles/Home.module.less';
+import pageContentStyles from './PageContent.module.less';
 
 export type PageContentProps = PropsWithChildren<{}>;
 
diff --git a/components/data.ts b/components/data.ts
new file mode 100644
index 0000000..748b3ae
--- /dev/null
+++ b/components/data.ts
@@ -0,0 +1,16 @@
+import { TimeDistanceProps } from 'idea-react';
+
+export const TimeOption: Pick<TimeDistanceProps, 'unitWords' | 'beforeWord' | 'afterWord'> = {
+  unitWords: {
+    ms: '毫秒',
+    s: '秒',
+    m: '分',
+    H: '时',
+    D: '日',
+    W: '周',
+    M: '月',
+    Y: '年',
+  },
+  beforeWord: '前',
+  afterWord: '后',
+};
diff --git a/models/Activity.ts b/models/Activity.ts
new file mode 100644
index 0000000..e2d8864
--- /dev/null
+++ b/models/Activity.ts
@@ -0,0 +1,102 @@
+import {
+  BiDataQueryOptions,
+  BiDataTable,
+  BiSearch,
+  LarkPageData,
+  makeSimpleFilter,
+  normalizeText,
+  TableCellLink,
+  TableCellRelation,
+  TableCellValue,
+  TableRecord,
+} from 'mobx-lark';
+import { toggle } from 'mobx-restful';
+import { HTTPError } from 'koajax';
+import { buildURLData } from 'web-utility';
+
+import { LarkBase, larkClient } from './Base';
+import { ActivityTableId, LarkBitableId } from './configuration';
+
+export type Activity = LarkBase &
+  Record<
+    | 'name'
+    | 'alias'
+    | 'type'
+    | 'tags'
+    | 'summary'
+    | 'image'
+    | 'cardImage'
+    | `${'start' | 'end'}Time`
+    | 'city'
+    | 'location'
+    | 'host'
+    | 'link'
+    | 'liveLink'
+    | `database${'' | 'Schema'}`,
+    TableCellValue
+  >;
+
+export class ActivityModel extends BiDataTable<Activity>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  constructor(appId = LarkBitableId, tableId = ActivityTableId) {
+    super(appId, tableId);
+  }
+
+  static getLink = ({
+    id,
+    type,
+    alias,
+    link,
+    database,
+  }: Pick<Activity, 'id' | 'type' | 'alias' | 'link' | 'database'>) =>
+    database ? `/${type?.toString().toLowerCase() || 'activity'}/${alias || id}` : link + '';
+
+  extractFields({
+    id,
+    fields: { host, city, link, database, databaseSchema, ...fields },
+  }: TableRecord<Activity>) {
+    return {
+      ...fields,
+      id: id!,
+      host: (host as TableCellRelation[])?.map(normalizeText),
+      city: (city as TableCellRelation[])?.map(normalizeText),
+      link: (link as TableCellLink)?.link,
+      database: (database as TableCellLink)?.link,
+      databaseSchema: databaseSchema && JSON.parse(databaseSchema as string),
+    };
+  }
+
+  @toggle('downloading')
+  async getOneByAlias(alias: string) {
+    const path = `${this.baseURI}?${buildURLData({ filter: makeSimpleFilter({ alias }, '=') })}`;
+
+    const { body } = await this.client.get<LarkPageData<TableRecord<Activity>>>(path);
+
+    const [item] = body!.data!.items || [];
+
+    if (!item)
+      throw new HTTPError(
+        `Activity "${alias}" is not found`,
+        { method: 'GET', path },
+        { status: 404, statusText: 'Not found', headers: {} },
+      );
+    return (this.currentOne = this.extractFields(item));
+  }
+
+  @toggle('downloading')
+  async getOne(id: string) {
+    try {
+      await super.getOne(id);
+    } catch {
+      await this.getOneByAlias(id);
+    }
+    return this.currentOne;
+  }
+}
+
+export class SearchActivityModel extends BiSearch<Activity>(ActivityModel) {
+  searchKeys = ['name', 'alias', 'type', 'tags', 'summary', 'city', 'location', 'host'];
+}
diff --git a/models/Base.ts b/models/Base.ts
index 1c5b56b..38ecbe4 100644
--- a/models/Base.ts
+++ b/models/Base.ts
@@ -51,6 +51,11 @@ export const makeGithubSearchCondition = (queryMap: DataObject) =>
     .map(([key, value]) => `${key}:${value}`)
     .join(' ');
 
+export type LarkBase = Record<
+  'id' | `created${'At' | 'By'}` | `updated${'At' | 'By'}`,
+  TableCellValue
+>;
+
 export const larkClient = new HTTPClient({
   baseURI: LARK_API_HOST,
   responseType: 'json',
diff --git a/models/Hackathon.ts b/models/Hackathon.ts
new file mode 100644
index 0000000..63c2048
--- /dev/null
+++ b/models/Hackathon.ts
@@ -0,0 +1,142 @@
+// Hackathon data types and mock data generator
+
+import {
+  BiDataQueryOptions,
+  BiDataTable,
+  normalizeText,
+  TableCellRelation,
+  TableCellText,
+  TableCellValue,
+  TableRecord,
+} from 'mobx-lark';
+
+import { LarkBase, larkClient } from './Base';
+
+export type Agenda = LarkBase &
+  Record<'summary' | 'name' | 'type' | 'startedAt' | 'endedAt', TableCellValue>;
+
+export class AgendaModel extends BiDataTable<Agenda>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { summary, ...fields }, ...meta }: TableRecord<Agenda>) {
+    return {
+      ...meta,
+      ...fields,
+      summary: normalizeText(summary as TableCellText),
+    };
+  }
+}
+
+export type Person = LarkBase &
+  Record<
+    | 'name'
+    | 'avatar'
+    | 'gender'
+    | 'age'
+    | 'address'
+    | 'organizations'
+    | 'skills'
+    | 'githubLink'
+    | 'githubAccount'
+    | 'createdBy',
+    TableCellValue
+  >;
+
+export class PersonModel extends BiDataTable<Person>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { githubLink, ...fields }, ...meta }: TableRecord<Person>) {
+    return {
+      ...meta,
+      ...fields,
+      githubLink: normalizeText(githubLink as TableCellText),
+    };
+  }
+}
+
+export type Organization = LarkBase &
+  Record<'name' | 'logo' | 'link' | 'members' | 'prizes', TableCellValue>;
+
+export class OrganizationModel extends BiDataTable<Organization>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { link, ...fields }, ...meta }: TableRecord<Organization>) {
+    return {
+      ...meta,
+      ...fields,
+      link: normalizeText(link as TableCellText),
+    };
+  }
+}
+
+export type Prize = LarkBase &
+  Record<
+    | 'summary'
+    | 'name'
+    | 'image'
+    | 'price'
+    | 'amount'
+    | 'level'
+    | `${'start' | 'end'}Rank`
+    | 'sponsor',
+    TableCellValue
+  >;
+
+export class PrizeModel extends BiDataTable<Prize>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+}
+
+export type Template = LarkBase &
+  Record<
+    'name' | 'languages' | 'tags' | 'summary' | `${'source' | 'preview'}Link` | 'products',
+    TableCellValue
+  >;
+
+export class TemplateModel extends BiDataTable<Template>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({
+    fields: { languages, tags, sourceLink, previewLink, ...fields },
+    ...meta
+  }: TableRecord<Template>) {
+    return {
+      ...meta,
+      ...fields,
+      languages: languages?.toString().split(/\s*,\s*/) || [],
+      tags: tags?.toString().split(/\s*,\s*/) || [],
+      sourceLink: normalizeText(sourceLink as TableCellText),
+      previewLink: normalizeText(previewLink as TableCellText),
+    };
+  }
+}
+
+export type Project = LarkBase &
+  Record<
+    'name' | 'summary' | 'group' | 'members' | 'products' | 'score' | 'rank' | 'prize',
+    TableCellValue
+  >;
+
+export class ProjectModel extends BiDataTable<Project>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { members, products, ...fields }, ...meta }: TableRecord<Project>) {
+    return {
+      ...meta,
+      ...fields,
+      members: (members as TableCellRelation[])?.map(normalizeText),
+      products: (products as TableCellRelation[])?.map(normalizeText),
+    };
+  }
+}
diff --git a/models/System.ts b/models/System.ts
index 3afd3db..a8e2684 100644
--- a/models/System.ts
+++ b/models/System.ts
@@ -1,13 +1,16 @@
 import { observable } from 'mobx';
 import { BiSearchModelClass } from 'mobx-lark';
-import { BaseModel, ListModel, toggle } from 'mobx-restful';
-import { Base, SearchableFilter } from 'mobx-strapi';
+import { BaseModel, DataObject, Filter, ListModel, toggle } from 'mobx-restful';
 import { Constructor } from 'web-utility';
 
+import { SearchActivityModel } from './Activity';
 import { ownClient } from './Base';
 import { OrganizationModel } from './Organization';
 
-export type SearchModel<T extends Base = any> = ListModel<T, SearchableFilter<T>>;
+export type SearchableFilter<D extends DataObject> = Filter<D> & {
+  keywords?: string;
+};
+export type SearchModel<T extends DataObject = any> = ListModel<T, SearchableFilter<T>>;
 
 export type SearchPageMeta = Pick<
   InstanceType<BiSearchModelClass>,
@@ -18,8 +21,9 @@ export type CityCoordinateMap = Record<string, [number, number]>;
 
 export class SystemModel extends BaseModel {
   searchMap = {
+    activity: SearchActivityModel,
     NGO: OrganizationModel,
-  } as Record<string, Constructor<SearchModel<Base>>>;
+  } as Record<string, Constructor<SearchModel<DataObject>>>;
 
   @observable
   accessor screenNarrow = false;
diff --git a/models/configuration.ts b/models/configuration.ts
index 2eb27e4..cf245b9 100644
--- a/models/configuration.ts
+++ b/models/configuration.ts
@@ -33,3 +33,6 @@ const { hostname, pathname } = new URL(process.env.NEXT_PUBLIC_LARK_WIKI_URL!);
 
 export const LarkWikiDomain = hostname;
 export const LarkWikiId = pathname.split('/').pop()!;
+
+export const LarkBitableId = process.env.NEXT_PUBLIC_LARK_BITABLE_ID!,
+  ActivityTableId = process.env.NEXT_PUBLIC_ACTIVITY_TABLE_ID!;
diff --git a/package.json b/package.json
index 37f04af..4679f60 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "mobx": "^6.15.0",
     "mobx-github": "^0.6.2",
     "mobx-i18n": "^0.7.2",
-    "mobx-lark": "^2.6.0",
+    "mobx-lark": "^2.6.3",
     "mobx-react": "^9.2.1",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
@@ -48,7 +48,6 @@
     "react-typed-component": "^1.0.6",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
-    "undici": "^7.16.0",
     "web-utility": "^4.6.4",
     "yaml": "^2.8.2"
   },
@@ -74,7 +73,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "husky": "^9.1.7",
     "jiti": "^2.6.1",
     "less": "^4.5.1",
@@ -85,7 +84,7 @@
     "prettier-plugin-css-order": "^2.1.2",
     "sass": "^1.97.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.50.1"
+    "typescript-eslint": "^8.51.0"
   },
   "resolutions": {
     "mobx-react-helper": "$mobx-react-helper",
@@ -111,6 +110,6 @@
     ]
   },
   "lint-staged": {
-    "*.{html,md,scss,json,yml,js,mjs,ts,tsx}": "prettier --write"
+    "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write"
   }
 }
diff --git a/pages/api/Lark/bitable/schema/[...slug].tsx b/pages/api/Lark/bitable/schema/[...slug].tsx
new file mode 100644
index 0000000..6bd4143
--- /dev/null
+++ b/pages/api/Lark/bitable/schema/[...slug].tsx
@@ -0,0 +1,22 @@
+import { Context } from 'koa';
+import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
+
+import { safeAPI, verifyJWT } from '../../../core';
+import { lark } from '../../core';
+
+export const config = { api: { bodyParser: false } };
+
+const router = createKoaRouter(import.meta.url);
+
+router.get('/:id', safeAPI, verifyJWT, async (context: Context) => {
+  const { id } = context.params,
+    { type } = context.query;
+
+  await lark.getAccessToken();
+
+  const documentId = type !== 'wiki' ? id : (await lark.wiki2drive(id)).obj_token;
+
+  context.body = await lark.getBiTableSchema(documentId);
+});
+
+export default withKoaRouter(router);
diff --git a/pages/api/Lark/document/copy/[...slug].ts b/pages/api/Lark/document/copy/[...slug].ts
index 5b64fd2..dd9f453 100644
--- a/pages/api/Lark/document/copy/[...slug].ts
+++ b/pages/api/Lark/document/copy/[...slug].ts
@@ -1,4 +1,5 @@
 import { Context } from 'koa';
+import { LarkDocumentPathType } from 'mobx-lark';
 import { createKoaRouter, withKoaRouter } from 'next-ssr-middleware';
 
 import { safeAPI, verifyJWT } from '../../../core';
@@ -10,9 +11,25 @@ const router = createKoaRouter(import.meta.url);
 
 router.post('/:type/:id', safeAPI, verifyJWT, async (context: Context) => {
   const { type, id } = context.params,
-    { name, parentToken } = Reflect.get(context.request, 'body');
+    { name, parentToken, ownerType, ownerId } = Reflect.get(context.request, 'body');
 
-  context.body = await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken);
+  const copiedFile =
+    type === 'wiki'
+      ? await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken)
+      : await lark.copyFile(`${type as LarkDocumentPathType}/${id}`, name, parentToken);
+
+  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.obj_token;
+
+  if (ownerType && ownerId)
+    try {
+      await lark.driveFileStore.transferOwner(type, newId, {
+        member_type: ownerType,
+        member_id: ownerId,
+      });
+    } catch (error) {
+      console.error(JSON.stringify(error, null, 2));
+    }
+  context.body = copiedFile;
 });
 
 export default withKoaRouter(router);
diff --git a/pages/api/core.ts b/pages/api/core.ts
index 0202a5a..dcb71c0 100644
--- a/pages/api/core.ts
+++ b/pages/api/core.ts
@@ -7,15 +7,10 @@ import { HTTPError } from 'koajax';
 import { Content } from 'mobx-github';
 import { DataObject } from 'mobx-restful';
 import { KoaOption, withKoa } from 'next-ssr-middleware';
-import { ProxyAgent, setGlobalDispatcher } from 'undici';
 import { parse } from 'yaml';
 
 import { LarkAppMeta } from '../../models/configuration';
 
-const { HTTP_PROXY } = process.env;
-
-if (HTTP_PROXY) setGlobalDispatcher(new ProxyAgent(HTTP_PROXY));
-
 export type JWTContext = ParameterizedContext<
   { jwtOriginalError: JsonWebTokenError } | { user: DataObject }
 >;
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
new file mode 100644
index 0000000..98e6ec7
--- /dev/null
+++ b/pages/hackathon/[id].tsx
@@ -0,0 +1,252 @@
+import { BiTableSchema, TableCellLocation, TableCellUser } from 'mobx-lark';
+import { observer } from 'mobx-react';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
+import { FC, useContext } from 'react';
+import { Badge, Card, Col, Container, Row } from 'react-bootstrap';
+import { text2color, UserRankView } from 'idea-react';
+import { formatDate } from 'web-utility';
+
+import { GitCard } from '../../components/Git/Card';
+import { LarkImage } from '../../components/LarkImage';
+import { PageHead } from '../../components/Layout/PageHead';
+import { Activity, ActivityModel } from '../../models/Activity';
+import { fileURLOf } from '../../models/Base';
+import {
+  Agenda,
+  AgendaModel,
+  Organization,
+  OrganizationModel,
+  Person,
+  PersonModel,
+  Prize,
+  PrizeModel,
+  Project,
+  ProjectModel,
+  Template,
+  TemplateModel,
+} from '../../models/Hackathon';
+import { I18nContext, I18nKey } from '../../models/Translation';
+import styles from '../../styles/Hackathon.module.less';
+
+export const getServerSideProps = compose<{ id: string }>(
+  cache(),
+  errorLogger,
+  async ({ params }) => {
+    const activity = await new ActivityModel().getOne(params!.id);
+
+    // @ts-expect-error Upstream compatibility
+    const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
+
+    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
+      new PersonModel(appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(appId, tableIdMap.Template).getAll(),
+      new ProjectModel(appId, tableIdMap.Project).getAll(),
+    ]);
+
+    return {
+      props: {
+        activity,
+        hackathon: { people, organizations, agenda, prizes, templates, projects },
+      },
+    };
+  },
+);
+
+interface HackathonDetailProps {
+  activity: Activity;
+  hackathon: {
+    people: Person[];
+    organizations: Organization[];
+    agenda: Agenda[];
+    prizes: Prize[];
+    templates: Template[];
+    projects: Project[];
+  };
+}
+
+const formatDateTime = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleString('zh-CN', {
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  const { t } = useContext(I18nContext);
+
+  const { name, summary, location, startTime, endTime } = activity,
+    { people, organizations, agenda, prizes, templates, projects } = hackathon;
+
+  return (
+    <>
+      <PageHead title={name as string} />
+
+      {/* Hero Section */}
+      <section className={styles.hero}>
+        <Container>
+          <h1 className={`text-center ${styles.title}`}>{name as string}</h1>
+          <p className={`text-center ${styles.description}`}>{summary as string}</p>
+
+          <Row className="mt-4 justify-content-center">
+            <Col md={4}>
+              <Card className={styles.infoCard}>
+                <Card.Body>
+                  <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
+                  <p className="text-white-50 mb-0">
+                    {(location as TableCellLocation).full_address}
+                  </p>
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col md={4}>
+              <Card className={styles.infoCard}>
+                <Card.Body>
+                  <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
+                  <p className="text-white-50 mb-0">
+                    {formatDate(startTime as string)} - {formatDate(endTime as string)}
+                  </p>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+
+      <Container className="my-5">
+        <section className={`${styles.section} ${styles.prizeSection}`}>
+          <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
+          <div className="mt-4">
+            <UserRankView
+              title={t('prizes')}
+              rank={prizes.map(({ name, image, price }, index) => ({
+                id: `prize-${index}`,
+                name: name as string,
+                avatar: fileURLOf(image),
+                score: price as number,
+              }))}
+            />
+          </div>
+        </section>
+
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
+          <ol className="list-unstyled mt-4">
+            {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
+              <li
+                key={name as string}
+                className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || 'break']}`}
+              >
+                <h5 className="text-white mb-2">{name as string}</h5>
+                <p className="text-white-50 small mb-2">{summary as string}</p>
+                <div className="d-flex justify-content-between align-items-center">
+                  <Badge bg={text2color(type as string)} className="me-2">
+                    {t(type as I18nKey)}
+                  </Badge>
+                  <div className="text-white-50 small">
+                    {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </section>
+
+        {/* Mid-front: Organizations - Horizontal logo layout */}
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
+          <nav className={styles.orgContainer}>
+            {organizations.map(({ name, link, logo }) => (
+              <a
+                key={name as string}
+                href={link as string}
+                target="_blank"
+                rel="noreferrer"
+                title={name as string}
+              >
+                <LarkImage src={logo} alt={name as string} className={styles.orgLogo} />
+              </a>
+            ))}
+          </nav>
+        </section>
+
+        {/* Mid-back: Templates - Using GitCard, 3-4 per row */}
+        <section className={`${styles.section} ${styles.templateSection}`}>
+          <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
+          <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
+            {templates.map(({ name, languages, tags, sourceLink, summary, previewLink }) => (
+              <Col key={name as string}>
+                <GitCard
+                  full_name={name as string}
+                  html_url={sourceLink as string}
+                  languages={languages as string[]}
+                  topics={tags as string[]}
+                  description={summary as string}
+                  homepage={previewLink as string}
+                />
+              </Col>
+            ))}
+          </Row>
+        </section>
+
+        {/* Mid-back: Projects - Narrow cards, 3-4 per row */}
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
+
+          <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
+            {projects.map(({ name, score, summary, createdBy, members }) => (
+              <Col as="li" key={name as string}>
+                <Card className={styles.projectCard} body>
+                  <div className="d-flex justify-content-between align-items-start mb-3">
+                    <h6 className="text-white flex-grow-1">{name as string}</h6>
+                    <div className={styles.scoreCircle}>{score as number}</div>
+                  </div>
+                  <p className="text-white-50 small mb-3">{summary as string}</p>
+                  <div className="text-white-50 small mb-2">
+                    <strong>{t('created_by')}:</strong>{' '}
+                    <a href={`mailto:${(createdBy as TableCellUser)?.email}`}>
+                      {(createdBy as TableCellUser)?.name}
+                    </a>
+                  </div>
+                  <div className="text-white-50 small">
+                    <strong>{t('members')}:</strong> {(members as string[]).join(', ')}
+                  </div>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </section>
+
+        {/* Footer: Participants - Circular avatars only */}
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
+          <nav className={styles.participantCloud}>
+            {people.map(({ name, avatar, githubLink }) => (
+              <a
+                key={name as string}
+                className="text-center"
+                target="_blank"
+                rel="noreferrer"
+                href={githubLink as string}
+              >
+                <LarkImage
+                  className={styles.avatar}
+                  src={avatar}
+                  alt={name as string}
+                  title={name as string}
+                />
+              </a>
+            ))}
+          </nav>
+        </section>
+      </Container>
+    </>
+  );
+});
+
+export default HackathonDetail;
diff --git a/pages/index.tsx b/pages/index.tsx
index ab4c84c..88f9654 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,140 +6,138 @@ import ReactTyped from 'react-typed-component';
 
 import { PageHead } from '../components/Layout/PageHead';
 import { I18nContext } from '../models/Translation';
-import styles from '../styles/Home.module.scss';
+import styles from '../styles/Home.module.less';
 
 const HomePage: FC = observer(() => {
   const { t } = useContext(I18nContext);
 
   return (
-  <>
-    <PageHead />
+    <>
+      <PageHead />
 
-    <section
-      className={`flex-fill d-flex flex-column justify-content-center align-items-center bg-secondary bg-gradient text-dark bg-opacity-10 ${styles.main}`}
-    >
-      <h2 className={`m-0 text-center ${styles.title}`}>
-        <ReactTyped
-          backDelay={1}
-          backSpeed={200}
-          cursorChar="|"
-          fadeOutDelay={100}
-          loop
-          loopCount={0}
-          showCursor
-          startDelay={0}
-          strings={[
-            renderToStaticMarkup(
-              <>
-                欢迎来到
-                <strong>
+      <section
+        className={`flex-fill d-flex flex-column justify-content-center align-items-center bg-secondary bg-gradient text-dark bg-opacity-10 ${styles.main}`}
+      >
+        <h2 className={`m-0 text-center ${styles.title}`}>
+          <ReactTyped
+            backDelay={1}
+            backSpeed={200}
+            cursorChar="|"
+            fadeOutDelay={100}
+            loop
+            loopCount={0}
+            showCursor
+            startDelay={0}
+            strings={[
+              renderToStaticMarkup(
+                <>
+                  欢迎来到
+                  <strong>
+                    <a className="text-primary mx-2" href="https://bazaar.fcc-cd.dev/">
+                      开源市集
+                    </a>
+                  </strong>
+                </>,
+              ),
+              renderToStaticMarkup(
+                <>
+                  {t('welcome_open_collaboration')}
+                  <strong>{t('open_collaboration')}</strong>
+                </>,
+              ),
+              renderToStaticMarkup(
+                <>
+                  欢迎一起评选<strong>开放协作人奖</strong>
+                </>,
+              ),
+            ]}
+            typeSpeed={100}
+          />
+        </h2>
+      </section>
+      <section
+        className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-warning bg-opacity-10 ${styles.main}`}
+      >
+        <h2 className="text-start mb-5 mt-5 fw-bolder">{t('participate')}</h2>
+        <Row className="flex-fill d-flex justify-content-around align-items-center w-100 px-3">
+          <Col xs={8} sm={7} md={4} className="pb-5">
+            <Card body className={`shadow ${styles.activeCard}`}>
+              <h5 className="fw-bold mb-3">{t('code_work')}</h5>
+              <ul className="list-unstyled">
+                <li className="mb-3">
                   <a
-                    className="text-primary mx-2"
-                    href="https://bazaar.fcc-cd.dev/"
+                    href="https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io"
+                    className="fw-bold"
                   >
-                    开源市集
+                    官网开发
                   </a>
-                </strong>
-              </>,
-            ),
-            renderToStaticMarkup(
-              <>
-                {t('welcome_open_collaboration')}<strong>{t('open_collaboration')}</strong>
-              </>,
-            ),
-            renderToStaticMarkup(
-              <>
-                欢迎一起评选<strong>开放协作人奖</strong>
-              </>,
-            ),
-          ]}
-          typeSpeed={100}
-        />
-      </h2>
-    </section>
-    <section
-      className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-warning bg-opacity-10 ${styles.main}`}
-    >
-      <h2 className="text-start mb-5 mt-5 fw-bolder">{t('participate')}</h2>
-      <Row className="flex-fill d-flex justify-content-around align-items-center w-100 px-3">
-        <Col xs={8} sm={7} md={4} className="pb-5">
-          <Card body className={`shadow ${styles.activeCard}`}>
-            <h5 className="fw-bold mb-3">{t('code_work')}</h5>
-            <ul className="list-unstyled">
-              <li className="mb-3">
+                  ：研发官网，让更多人了解「开源市集」，了解「开放式协作」……
+                </li>
+                <li className="mb-3">
+                  <span className="fw-bold">……</span>
+                </li>
+              </ul>
+            </Card>
+          </Col>
+          <Col xs={8} sm={7} md={4} className="pb-5">
+            <Card body className={`shadow overflow-auto ${styles.activeCard}`}>
+              <h5 className="fw-bold mb-3">{t('non_code_work')}</h5>
+              <ul className="list-unstyled">
+                <li className="mb-3">
+                  <a href="/history" className="fw-bold">
+                    开放市集
+                  </a>
+                  ：一群来自不同领域的有趣的朋友通过展示、交流，将“开源”和“开放式协作”的乐趣带给更多人……
+                </li>
+                <li className="mb-3">
+                  <a href="/open-collaborator-award" className="fw-bold">
+                    开放协作人奖
+                  </a>
+                  ：在过去的一年中令你难以忘怀的人，请把 Ta 推荐给更多的人……
+                </li>
+                <li className="mb-3">
+                  <span className="fw-bold">……</span>
+                </li>
+              </ul>
+            </Card>
+          </Col>
+          <Col xs={8} sm={7} md={4} className="pb-5">
+            <Card body className={`shadow ${styles.activeCard}`}>
+              <p>
+                欢迎
+                <a href="/join-us" className="fw-bold">
+                  成为共创人/方
+                </a>
+                ，更多内容/形式等你来共创……
+              </p>
+            </Card>
+          </Col>
+        </Row>
+      </section>
+      <section
+        className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-success bg-opacity-10 ${styles.main}`}
+      >
+        <h2 className="text-start mb-5 fw-bolder h1">{t('action')}</h2>
+        <Row className="d-flex flex-column justify-content-start align-items-center w-100 mb-5">
+          <Col className="text-center">
+            <figure className="text-center">
+              <blockquote className="blockquote mb-4">
+                <p className="h2">{t('we_are_organizing_bazaar')}</p>
+              </blockquote>
+              <figcaption className="h6 text-muted">
+                即兴三月，开源开放！来都来了，玩就是了！👉
                 <a
-                  href="https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io"
-                  className="fw-bold"
+                  href="https://open-source-bazaar.feishu.cn/docs/doccnGSsshgO4ojuAHVzWJMXWog?from=from_copylink"
+                  className="text-primary"
                 >
-                  官网开发
-                </a>
-                ：研发官网，让更多人了解「开源市集」，了解「开放式协作」……
-              </li>
-              <li className="mb-3">
-                <span className="fw-bold">……</span>
-              </li>
-            </ul>
-          </Card>
-        </Col>
-        <Col xs={8} sm={7} md={4} className="pb-5">
-          <Card body className={`shadow overflow-auto ${styles.activeCard}`}>
-            <h5 className="fw-bold mb-3">{t('non_code_work')}</h5>
-            <ul className="list-unstyled">
-              <li className="mb-3">
-                <a href="/history" className="fw-bold">
-                  开放市集
-                </a>
-                ：一群来自不同领域的有趣的朋友通过展示、交流，将“开源”和“开放式协作”的乐趣带给更多人……
-              </li>
-              <li className="mb-3">
-                <a href="/open-collaborator-award" className="fw-bold">
-                  开放协作人奖
+                  立刻协作
                 </a>
-                ：在过去的一年中令你难以忘怀的人，请把 Ta 推荐给更多的人……
-              </li>
-              <li className="mb-3">
-                <span className="fw-bold">……</span>
-              </li>
-            </ul>
-          </Card>
-        </Col>
-        <Col xs={8} sm={7} md={4} className="pb-5">
-          <Card body className={`shadow ${styles.activeCard}`}>
-            <p>
-              欢迎
-              <a href="/join-us" className="fw-bold">
-                成为共创人/方
-              </a>
-              ，更多内容/形式等你来共创……
-            </p>
-          </Card>
-        </Col>
-      </Row>
-    </section>
-    <section
-      className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-success bg-opacity-10 ${styles.main}`}
-    >
-      <h2 className="text-start mb-5 fw-bolder h1">{t('action')}</h2>
-      <Row className="d-flex flex-column justify-content-start align-items-center w-100 mb-5">
-        <Col className="text-center">
-          <figure className="text-center">
-            <blockquote className="blockquote mb-4">
-              <p className="h2">{t('we_are_organizing_bazaar')}</p>
-            </blockquote>
-            <figcaption className="h6 text-muted">
-              即兴三月，开源开放！来都来了，玩就是了！👉
-              <a
-                href="https://open-source-bazaar.feishu.cn/docs/doccnGSsshgO4ojuAHVzWJMXWog?from=from_copylink"
-                className="text-primary"
-              >
-                立刻协作
-              </a>
-            </figcaption>
-          </figure>
-        </Col>
-      </Row>
-    </section>
-  </>
+              </figcaption>
+            </figure>
+          </Col>
+        </Row>
+      </section>
+    </>
   );
 });
 
diff --git a/pages/search/[model]/index.tsx b/pages/search/[model]/index.tsx
index a1ea426..11a99be 100644
--- a/pages/search/[model]/index.tsx
+++ b/pages/search/[model]/index.tsx
@@ -5,6 +5,7 @@ import { FC, useContext } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 import { buildURLData } from 'web-utility';
 
+import { ActivityCard } from '../../../components/Activity/Card';
 import { CardPage, CardPageProps } from '../../../components/Layout/CardPage';
 import { PageHead } from '../../../components/Layout/PageHead';
 import { SearchBar } from '../../../components/Navigator/SearchBar';
@@ -38,10 +39,12 @@ export const getServerSideProps = compose<{ model: string }, SearchModelPageProp
 );
 
 const SearchNameMap = ({ t }: typeof i18n): Record<string, string> => ({
+  activity: t('activity'),
   NGO: t('NGO'),
 });
 
 const SearchCardMap: Record<string, CardPageProps['Card']> = {
+  activity: ActivityCard,
   NGO: OrganizationCard,
 };
 
@@ -57,7 +60,7 @@ const SearchModelPage: FC<SearchModelPageProps> = observer(
     const title = `${keywords} - ${name} ${t('search_results')}`;
 
     return (
-      <Container>
+      <Container className="my-5">
         <PageHead title={title} />
 
         <h1 className="my-3 text-center">{title}</h1>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2855af..d181b89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,8 +67,8 @@ importers:
         specifier: ^0.7.2
         version: 0.7.2(mobx@6.15.0)(typescript@5.9.3)
       mobx-lark:
-        specifier: ^2.6.0
-        version: 2.6.0(core-js@3.47.0)(react@19.2.3)(typescript@5.9.3)
+        specifier: ^2.6.3
+        version: 2.6.3(core-js@3.47.0)(react@19.2.3)(typescript@5.9.3)
       mobx-react:
         specifier: ^9.2.1
         version: 9.2.1(mobx@6.15.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -114,9 +114,6 @@ importers:
       remark-mdx-frontmatter:
         specifier: ^5.2.0
         version: 5.2.0
-      undici:
-        specifier: ^7.16.0
-        version: 7.16.0
       web-utility:
         specifier: ^4.6.4
         version: 4.6.4(typescript@5.9.3)
@@ -188,8 +185,8 @@ importers:
         specifier: ^12.1.1
         version: 12.1.1(eslint@9.39.2(jiti@2.6.1))
       globals:
-        specifier: ^16.5.0
-        version: 16.5.0
+        specifier: ^17.0.0
+        version: 17.0.0
       husky:
         specifier: ^9.1.7
         version: 9.1.7
@@ -221,8 +218,8 @@ importers:
         specifier: ~5.9.3
         version: 5.9.3
       typescript-eslint:
-        specifier: ^8.50.1
-        version: 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: ^8.51.0
+        version: 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
 packages:
 
@@ -1727,63 +1724,63 @@ packages:
   '@types/warning@3.0.3':
     resolution: {integrity: sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==}
 
-  '@typescript-eslint/eslint-plugin@8.50.1':
-    resolution: {integrity: sha512-PKhLGDq3JAg0Jk/aK890knnqduuI/Qj+udH7wCf0217IGi4gt+acgCyPVe79qoT+qKUvHMDQkwJeKW9fwl8Cyw==}
+  '@typescript-eslint/eslint-plugin@8.51.0':
+    resolution: {integrity: sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.50.1
+      '@typescript-eslint/parser': ^8.51.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.50.1':
-    resolution: {integrity: sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==}
+  '@typescript-eslint/parser@8.51.0':
+    resolution: {integrity: sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.50.1':
-    resolution: {integrity: sha512-E1ur1MCVf+YiP89+o4Les/oBAVzmSbeRB0MQLfSlYtbWU17HPxZ6Bhs5iYmKZRALvEuBoXIZMOIRRc/P++Ortg==}
+  '@typescript-eslint/project-service@8.51.0':
+    resolution: {integrity: sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.50.1':
-    resolution: {integrity: sha512-mfRx06Myt3T4vuoHaKi8ZWNTPdzKPNBhiblze5N50//TSHOAQQevl/aolqA/BcqqbJ88GUnLqjjcBc8EWdBcVw==}
+  '@typescript-eslint/scope-manager@8.51.0':
+    resolution: {integrity: sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.50.1':
-    resolution: {integrity: sha512-ooHmotT/lCWLXi55G4mvaUF60aJa012QzvLK0Y+Mp4WdSt17QhMhWOaBWeGTFVkb2gDgBe19Cxy1elPXylslDw==}
+  '@typescript-eslint/tsconfig-utils@8.51.0':
+    resolution: {integrity: sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.50.1':
-    resolution: {integrity: sha512-7J3bf022QZE42tYMO6SL+6lTPKFk/WphhRPe9Tw/el+cEwzLz1Jjz2PX3GtGQVxooLDKeMVmMt7fWpYRdG5Etg==}
+  '@typescript-eslint/type-utils@8.51.0':
+    resolution: {integrity: sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.50.1':
-    resolution: {integrity: sha512-v5lFIS2feTkNyMhd7AucE/9j/4V9v5iIbpVRncjk/K0sQ6Sb+Np9fgYS/63n6nwqahHQvbmujeBL7mp07Q9mlA==}
+  '@typescript-eslint/types@8.51.0':
+    resolution: {integrity: sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.50.1':
-    resolution: {integrity: sha512-woHPdW+0gj53aM+cxchymJCrh0cyS7BTIdcDxWUNsclr9VDkOSbqC13juHzxOmQ22dDkMZEpZB+3X1WpUvzgVQ==}
+  '@typescript-eslint/typescript-estree@8.51.0':
+    resolution: {integrity: sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.50.1':
-    resolution: {integrity: sha512-lCLp8H1T9T7gPbEuJSnHwnSuO9mDf8mfK/Nion5mZmiEaQD9sWf9W4dfeFqRyqRjF06/kBuTmAqcs9sewM2NbQ==}
+  '@typescript-eslint/utils@8.51.0':
+    resolution: {integrity: sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.50.1':
-    resolution: {integrity: sha512-IrDKrw7pCRUR94zeuCSUWQ+w8JEf5ZX5jl/e6AHGSLi1/zIr0lgutfn/7JpfCey+urpgQEdrZVYzCaVVKiTwhQ==}
+  '@typescript-eslint/visitor-keys@8.51.0':
+    resolution: {integrity: sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -2108,8 +2105,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001761:
-    resolution: {integrity: sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==}
+  caniuse-lite@1.0.30001762:
+    resolution: {integrity: sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -2829,8 +2826,8 @@ packages:
     resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
     engines: {node: '>=18'}
 
-  globals@16.5.0:
-    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+  globals@17.0.0:
+    resolution: {integrity: sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -3612,8 +3609,8 @@ packages:
     peerDependencies:
       mobx: '>=6.11'
 
-  mobx-lark@2.6.0:
-    resolution: {integrity: sha512-X8we2BfohqcQvYQ0ACh+Bwpme/PLu5di6zmTQ5uUuRy01u0mk6vEt6s0NY1hzuzWfalJOYzJHZUjGeaE71KGbw==}
+  mobx-lark@2.6.3:
+    resolution: {integrity: sha512-XLEo5y0dtHBVu0dW6lqaiostz08iWjbHMBxA35L7fqDZzAJJU5HTObFG+aVt1Tza1c7Cm65bMTf9D8WTJSKTtw==}
     peerDependencies:
       react: '>=16'
 
@@ -3975,8 +3972,8 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+  qs@6.14.1:
+    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
     engines: {node: '>=0.6'}
 
   queue-microtask@1.2.3:
@@ -4553,8 +4550,8 @@ packages:
   typed.js@2.1.0:
     resolution: {integrity: sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==}
 
-  typescript-eslint@8.50.1:
-    resolution: {integrity: sha512-ytTHO+SoYSbhAH9CrYnMhiLx8To6PSSvqnvXyPUgPETCvB6eBKmTI9w6XMPS3HsBRGkwTVBX+urA8dYQx6bHfQ==}
+  typescript-eslint@8.51.0:
+    resolution: {integrity: sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -4586,10 +4583,6 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici@7.16.0:
-    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
-    engines: {node: '>=20.18.1'}
-
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -6292,7 +6285,7 @@ snapshots:
   '@stylistic/eslint-plugin@5.6.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/types': 8.51.0
       eslint: 9.39.2(jiti@2.6.1)
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -6505,14 +6498,14 @@ snapshots:
 
   '@types/warning@3.0.3': {}
 
-  '@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.50.1
-      '@typescript-eslint/type-utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.50.1
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
       eslint: 9.39.2(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -6521,41 +6514,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.50.1
-      '@typescript-eslint/types': 8.50.1
-      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.50.1
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
       debug: 4.4.3
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.50.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.51.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.50.1':
+  '@typescript-eslint/scope-manager@8.51.0':
     dependencies:
-      '@typescript-eslint/types': 8.50.1
-      '@typescript-eslint/visitor-keys': 8.50.1
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
 
-  '@typescript-eslint/tsconfig-utils@8.50.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.51.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.50.1
-      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.2(jiti@2.6.1)
       ts-api-utils: 2.3.0(typescript@5.9.3)
@@ -6563,14 +6556,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.50.1': {}
+  '@typescript-eslint/types@8.51.0': {}
 
-  '@typescript-eslint/typescript-estree@8.50.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.51.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.50.1
-      '@typescript-eslint/visitor-keys': 8.50.1
+      '@typescript-eslint/project-service': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
       debug: 4.4.3
       minimatch: 9.0.5
       semver: 7.7.3
@@ -6580,20 +6573,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.50.1
-      '@typescript-eslint/types': 8.50.1
-      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.50.1':
+  '@typescript-eslint/visitor-keys@8.51.0':
     dependencies:
-      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/types': 8.51.0
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -6871,7 +6864,7 @@ snapshots:
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001761
+      caniuse-lite: 1.0.30001762
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
@@ -6903,7 +6896,7 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001761: {}
+  caniuse-lite@1.0.30001762: {}
 
   ccount@2.0.1: {}
 
@@ -6958,7 +6951,7 @@ snapshots:
     dependencies:
       '@hapi/bourne': 3.0.0
       inflation: 2.1.0
-      qs: 6.14.0
+      qs: 6.14.1
       raw-body: 2.5.3
       type-is: 1.6.18
 
@@ -7390,7 +7383,7 @@ snapshots:
       eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@2.6.1))
       globals: 16.4.0
-      typescript-eslint: 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      typescript-eslint: 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -7810,7 +7803,7 @@ snapshots:
 
   globals@16.4.0: {}
 
-  globals@16.5.0: {}
+  globals@17.0.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -8870,7 +8863,7 @@ snapshots:
       - element-internals-polyfill
       - typescript
 
-  mobx-lark@2.6.0(core-js@3.47.0)(react@19.2.3)(typescript@5.9.3):
+  mobx-lark@2.6.3(core-js@3.47.0)(react@19.2.3)(typescript@5.9.3):
     dependencies:
       '@swc/helpers': 0.5.18
       '@types/react': 19.2.7
@@ -8959,7 +8952,7 @@ snapshots:
       koajax: 3.1.2(core-js@3.47.0)(typescript@5.9.3)
       mobx: 6.15.0
       mobx-restful: 2.1.4(core-js@3.47.0)(mobx@6.15.0)(typescript@5.9.3)
-      qs: 6.14.0
+      qs: 6.14.1
       regenerator-runtime: 0.14.1
       web-utility: 4.6.4(typescript@5.9.3)
     transitivePeerDependencies:
@@ -9036,7 +9029,7 @@ snapshots:
       '@next/env': 16.1.1
       '@swc/helpers': 0.5.15
       baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001761
+      caniuse-lite: 1.0.30001762
       postcss: 8.4.31
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
@@ -9292,7 +9285,7 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  qs@6.14.0:
+  qs@6.14.1:
     dependencies:
       side-channel: 1.1.0
 
@@ -10019,12 +10012,12 @@ snapshots:
 
   typed.js@2.1.0: {}
 
-  typescript-eslint@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+  typescript-eslint@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -10055,8 +10048,6 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici@7.16.0: {}
-
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
new file mode 100644
index 0000000..795c2f6
--- /dev/null
+++ b/styles/Hackathon.module.less
@@ -0,0 +1,275 @@
+// Tech-themed hackathon styling with blue-purple gradient and pink cards
+
+.hero {
+  position: relative;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  padding: 4rem 0;
+  overflow: hidden;
+  color: #fff;
+
+  &::before {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    animation: grid-animation 20s linear infinite;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+    width: 200%;
+    height: 200%;
+    pointer-events: none;
+    content: '';
+  }
+}
+
+@keyframes grid-animation {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.title {
+  margin-bottom: 1rem;
+  font-weight: 700;
+  font-size: 3rem;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.description {
+  opacity: 0.9;
+  margin: 0 auto;
+  max-width: 800px;
+  font-size: 1.2rem;
+}
+
+.infoCard {
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  padding: 1.5rem;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.section {
+  position: relative;
+  padding: 3rem 0;
+}
+
+.sectionTitle {
+  display: inline-block;
+  margin-bottom: 2rem;
+  border-bottom: 4px solid;
+  border-image: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) 1;
+  background: linear-gradient(90deg, #f093fb, #f5576c, #ffd140);
+  -webkit-background-clip: text;
+  padding-bottom: 0.5rem;
+  font-weight: 700;
+  font-size: 2rem;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+// Vibrant cards - Multicolor gradient background
+.darkCard {
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  border-radius: 16px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  padding: 1.5rem;
+  color: #fff;
+
+  &:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
+    background: linear-gradient(135deg, #7d8ff5, #8a5cb8);
+  }
+}
+
+// Bright cards - Warm gradient background
+.lightCard {
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.3);
+  border-radius: 16px;
+  background: linear-gradient(135deg, #fa709a, #fee140);
+  padding: 1.5rem;
+  color: #1f2937;
+
+  &:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 10px 30px rgba(250, 112, 154, 0.5);
+    background: linear-gradient(135deg, #ff6b9d, #ffa400);
+  }
+}
+
+// Agenda items with vibrant gradient backgrounds
+.agendaItem {
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+  border-left: 5px solid;
+  border-radius: 12px;
+  padding: 1.5rem;
+  color: #fff;
+
+  &:hover {
+    transform: translateX(8px) scale(1.02);
+  }
+
+  &.formation {
+    box-shadow: 0 4px 15px rgba(0, 201, 255, 0.3);
+    border-left-color: #00c9ff;
+    background: linear-gradient(135deg, #00c9ff, #92fe9d);
+  }
+
+  &.enrollment {
+    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
+    border-left-color: #f5576c;
+    background: linear-gradient(135deg, #f5576c, #f093fb);
+  }
+
+  &.competition {
+    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
+    border-left-color: #4facfe;
+    background: linear-gradient(135deg, #4facfe, #00f2fe);
+  }
+
+  &.break {
+    box-shadow: 0 4px 15px rgba(255, 209, 64, 0.3);
+    border-left-color: #ffd140;
+    background: linear-gradient(135deg, #ffd140, #ff6b6b);
+  }
+
+  &.evaluation {
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    border-left-color: #667eea;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+  }
+}
+
+// Prize section using UserRankView
+.prizeSection {
+  margin-bottom: 2rem;
+}
+
+// Organization horizontal layout
+.orgContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  padding: 2rem 0;
+}
+
+.orgLogo {
+  filter: grayscale(0.3);
+  transition: all 0.3s ease;
+  border-radius: 12px;
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+
+  &:hover {
+    transform: scale(1.1);
+    filter: grayscale(0);
+  }
+}
+
+// Template section using GitCard
+.templateSection {
+  margin-bottom: 2rem;
+}
+
+// Project cards with vibrant gradient
+.projectCard {
+  transition: all 0.3s ease;
+  margin-bottom: 1.5rem;
+  border: 2px solid transparent;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  padding: 1.5rem;
+  color: #1f2937;
+
+  &:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 12px 35px rgba(250, 112, 154, 0.4);
+    background: linear-gradient(135deg, #ff6b9d 0%, #ffa400 100%);
+  }
+}
+
+.scoreCircle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
+  width: 60px;
+  height: 60px;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+// Circular avatars only for participants
+.avatar {
+  transition: all 0.3s ease;
+  cursor: pointer;
+  box-shadow: 0 0 20px rgba(250, 112, 154, 0.5);
+  border: 4px solid transparent;
+  border-radius: 50%;
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(135deg, #f093fb, #f5576c) border-box;
+  width: 80px;
+  height: 80px;
+
+  &:hover {
+    transform: scale(1.15);
+    box-shadow: 0 0 30px rgba(250, 112, 154, 0.7);
+  }
+}
+
+.skillBadge {
+  display: inline-block;
+  margin: 0.25rem;
+  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
+  border-radius: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0.35rem 0.85rem;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.techGradient {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 700;
+}
+
+.glowText {
+  text-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
+}
+
+.participantCloud {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem 0;
+}
diff --git a/styles/Home.module.scss b/styles/Home.module.less
similarity index 100%
rename from styles/Home.module.scss
rename to styles/Home.module.less
diff --git a/translation/en-US.ts b/translation/en-US.ts
index b7fc156..0c272f2 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -5,6 +5,7 @@ export default {
   code_of_conduct: 'Code of Conduct',
   join_us: 'Join Us',
   open_collaborator_award: 'Open Collaborator Award',
+  activity: 'Activity',
   hackathon: 'Hackathon',
   open_source_projects: 'Open Source projects',
   open_source_bazaar: 'Open Source Bazaar',
@@ -186,4 +187,50 @@ export default {
   finance_edu_next_2:
     'Find corresponding ETFs or index funds, paying attention to fees and fund size.',
   finance_edu_next_3: 'Set up a recurring investment plan and track valuation and drawdown.',
+
+  // Hackathon
+  hackathon_detail: 'Hackathon Details',
+  event_info: 'Event Information',
+  event_description: 'Event Description',
+  event_location: 'Location',
+  event_duration: 'Duration',
+  agenda: 'Agenda',
+  participants: 'Participants',
+  organizations: 'Organizations',
+  prizes: 'Prizes',
+  hackathon_prizes: 'Hackathon Prizes',
+  templates: 'Templates',
+  projects: 'Projects',
+  type: 'Type',
+  start_time: 'Start Time',
+  end_time: 'End Time',
+  workshop: 'Workshop',
+  presentation: 'Presentation',
+  coding: 'Coding',
+  break: 'Break',
+  ceremony: 'Ceremony',
+  gender: 'Gender',
+  age: 'Age',
+  address: 'Address',
+  skills: 'Skills',
+  github_account: 'GitHub Account',
+  view_github: 'View GitHub',
+  members: 'Members',
+  sponsor: 'Sponsor',
+  price: 'Prize Money',
+  amount: 'Amount',
+  level: 'Level',
+  gold: 'Gold',
+  silver: 'Silver',
+  bronze: 'Bronze',
+  special: 'Special',
+  source_code: 'Source Code',
+  preview: 'Preview',
+  created_by: 'Created By',
+  group: 'Team',
+  products: 'Products',
+  score: 'Score',
+  male: 'Male',
+  female: 'Female',
+  other: 'Other',
 };
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 7fe7629..413eaf4 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -7,6 +7,7 @@ export default {
   join_us: '参与',
   open_collaborator_award: '开放协作人奖',
   open_source_projects: '开源项目',
+  activity: '活动',
   hackathon: '黑客马拉松',
   home_page: '主页',
   wiki: '知识库',
@@ -182,4 +183,50 @@ export default {
   finance_edu_next_1: '挑选 2-3 支指数，加入收藏/关注列表。',
   finance_edu_next_2: '了解对应的 ETF 或联接基金，关注费率与规模。',
   finance_edu_next_3: '设定定投计划并持续跟踪估值、回撤。',
+
+  // Hackathon
+  hackathon_detail: '黑客松详情',
+  event_info: '活动信息',
+  event_description: '活动描述',
+  event_location: '活动地点',
+  event_duration: '活动时间',
+  agenda: '日程安排',
+  participants: '参与者',
+  organizations: '组织方',
+  prizes: '奖项',
+  hackathon_prizes: '黑客松奖项',
+  templates: '项目模板',
+  projects: '参赛项目',
+  type: '类型',
+  start_time: '开始时间',
+  end_time: '结束时间',
+  workshop: '工作坊',
+  presentation: '展示',
+  coding: '编程',
+  break: '休息',
+  ceremony: '仪式',
+  gender: '性别',
+  age: '年龄',
+  address: '地址',
+  skills: '技能',
+  github_account: 'GitHub 账号',
+  view_github: '查看 GitHub',
+  members: '成员',
+  sponsor: '赞助商',
+  price: '奖金',
+  amount: '数量',
+  level: '等级',
+  gold: '金奖',
+  silver: '银奖',
+  bronze: '铜奖',
+  special: '特别奖',
+  source_code: '源代码',
+  preview: '预览',
+  created_by: '创建者',
+  group: '团队',
+  products: '产品',
+  score: '评分',
+  male: '男',
+  female: '女',
+  other: '其他',
 };
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index bfabbad..2270b9d 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -7,6 +7,7 @@ export default {
   join_us: '參與',
   open_collaborator_award: '開放協作人獎',
   open_source_projects: '開源項目',
+  activity: '活動',
   hackathon: '黑客馬拉松',
   home_page: '主頁',
   wiki: '知識庫',
@@ -182,4 +183,50 @@ export default {
   finance_edu_next_1: '挑選 2-3 支指數，加入收藏／關注列表。',
   finance_edu_next_2: '了解對應的 ETF 或聯接基金，關注費率與規模。',
   finance_edu_next_3: '設定定投計畫並持續跟蹤估值、回撤。',
+
+  // Hackathon
+  hackathon_detail: '黑客松詳情',
+  event_info: '活動資訊',
+  event_description: '活動描述',
+  event_location: '活動地點',
+  event_duration: '活動時間',
+  agenda: '日程安排',
+  participants: '參與者',
+  organizations: '組織方',
+  prizes: '獎項',
+  hackathon_prizes: '黑客松獎項',
+  templates: '項目模板',
+  projects: '參賽項目',
+  type: '類型',
+  start_time: '開始時間',
+  end_time: '結束時間',
+  workshop: '工作坊',
+  presentation: '展示',
+  coding: '編程',
+  break: '休息',
+  ceremony: '儀式',
+  gender: '性別',
+  age: '年齡',
+  address: '地址',
+  skills: '技能',
+  github_account: 'GitHub 帳號',
+  view_github: '查看 GitHub',
+  members: '成員',
+  sponsor: '贊助商',
+  price: '獎金',
+  amount: '數量',
+  level: '等級',
+  gold: '金獎',
+  silver: '銀獎',
+  bronze: '銅獎',
+  special: '特別獎',
+  source_code: '源代碼',
+  preview: '預覽',
+  created_by: '創建者',
+  group: '團隊',
+  products: '產品',
+  score: '評分',
+  male: '男',
+  female: '女',
+  other: '其他',
 };