diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx b/apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx
index 23423aa..68d119a 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-teams/_components/modal-team-detail-new.tsx
@@ -1,7 +1,8 @@
-import { FC, useState, useEffect, useMemo } from 'react';
+import { FC, useState, useEffect, useMemo, useRef } from 'react';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { cn } from '@imphnen-frontend-service/utils';
 import TeamBannerPlaceholder from './team-banner-placeholder';
+import { CityFilterSelect } from '../../../../components/city-filter-select';
 import {
   TeamOutlined,
   CalendarOutlined,
@@ -16,6 +17,8 @@ import {
   CheckCircleOutlined,
   ClockCircleOutlined,
   CloseCircleOutlined,
+  CameraOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
 
 interface TeamMember {
@@ -66,6 +69,9 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
   const [formData, setFormData] = useState<TeamType | null>(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [activeTab, setActiveTab] = useState<'details' | 'members'>('details');
+  const [showLogoMenu, setShowLogoMenu] = useState(false);
+  const logoInputRef = useRef<HTMLInputElement>(null);
+  const bannerInputRef = useRef<HTMLInputElement>(null);
 
   // Initialize form data when modal opens
   useEffect(() => {
@@ -102,7 +108,9 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
       formData.name !== team.name ||
       formData.description !== team.description ||
       formData.city !== team.city ||
-      formData.visibility !== team.visibility
+      formData.visibility !== team.visibility ||
+      formData.logo !== team.logo ||
+      formData.banner !== team.banner
     );
   }, [formData, team]);
 
@@ -125,7 +133,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
 
   const handleInputChange = (
     field: keyof TeamType,
-    value: string | boolean | 'public' | 'private'
+    value: string | boolean | 'public' | 'private' | undefined
   ) => {
     setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
   };
@@ -145,7 +153,59 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
     onClose();
   };
 
-  const cities = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
+  const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        alert('Image size must be less than 5MB');
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const logoUrl = e.target?.result as string;
+        handleInputChange('logo', logoUrl);
+        setShowLogoMenu(false);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleBannerUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        alert('Image size must be less than 5MB');
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const bannerUrl = e.target?.result as string;
+        handleInputChange('banner', bannerUrl);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveLogo = () => {
+    handleInputChange('logo', undefined);
+    setShowLogoMenu(false);
+  };
+
+  const handleRemoveBanner = () => {
+    handleInputChange('banner', undefined);
+  };
+
+  const triggerLogoUpload = () => {
+    logoInputRef.current?.click();
+  };
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
@@ -169,40 +229,155 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
           </div>
           <button
             className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
-            onClick={onClose}
+            onClick={() => {
+              setShowLogoMenu(false);
+              onClose();
+            }}
           >
             <CloseOutlined className="text-neutral-400 text-lg" />
           </button>
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* Banner Section (for existing teams) */}
-          {team && (
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-neutral-700">
-                Team Banner
-              </label>
-              <TeamBannerPlaceholder
-                banner={team.banner}
-                teamName={team.name}
-                className="rounded-lg border border-neutral-200"
-              />
-            </div>
-          )}
+        <div className="p-6 space-y-6" onClick={() => setShowLogoMenu(false)}>
+          {/* Hidden File Inputs */}
+          <input
+            type="file"
+            ref={logoInputRef}
+            onChange={handleLogoUpload}
+            accept="image/*"
+            className="hidden"
+          />
+          <input
+            type="file"
+            ref={bannerInputRef}
+            onChange={handleBannerUpload}
+            accept="image/*"
+            className="hidden"
+          />
 
-          {/* Team Name */}
+          {/* Interactive Banner Section */}
           <div className="space-y-2">
             <label className="block text-sm font-medium text-neutral-700">
-              Team Name <span className="text-danger-500">*</span>
+              Team Banner
+              <span className="text-xs text-neutral-500 ml-2">
+                (3:1 aspect ratio recommended)
+              </span>
             </label>
-            <input
-              type="text"
-              className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-              placeholder="Enter team name"
-              value={formData.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
-            />
+            <div className="relative group">
+              <TeamBannerPlaceholder
+                banner={formData.banner}
+                teamName={formData.name || 'Team Name'}
+                className="rounded-lg border border-neutral-200 transition-all group-hover:border-primary-300"
+              />
+              {/* Banner Action Buttons */}
+              <div className="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    bannerInputRef.current?.click();
+                  }}
+                  className="bg-white/90 hover:bg-white text-neutral-700 border-transparent shadow-sm gap-2"
+                >
+                  <UploadOutlined className="text-sm" />
+                  {formData.banner ? 'Change Banner' : 'Add Banner'}
+                </Button>
+                {formData.banner && (
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemoveBanner();
+                    }}
+                    className="bg-white/90 hover:bg-white text-red-600 border-transparent shadow-sm hover:text-red-700 gap-2"
+                  >
+                    <DeleteOutlined className="text-sm" />
+                    Delete Banner
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Team Logo & Name Row */}
+          <div className="grid grid-cols-12 gap-4 items-start">
+            {/* Interactive Team Logo */}
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-neutral-700 mb-2">
+                Logo
+              </label>
+              <div className="relative group">
+                <div className="w-24 h-24 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border border-neutral-200 group-hover:border-primary-300 transition-colors">
+                  {formData.logo ? (
+                    <img
+                      src={formData.logo}
+                      alt={formData.name || 'Team Logo'}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <TeamOutlined className="text-neutral-400 text-xl" />
+                  )}
+                </div>
+                {/* Logo Hover Overlay - Full circle */}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setShowLogoMenu(!showLogoMenu);
+                  }}
+                  className="absolute inset-0 bg-neutral-300/80 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center w-24 h-24"
+                >
+                  <CameraOutlined className="text-white text-lg" />
+                </button>
+
+                {/* Logo Menu Dropdown */}
+                {showLogoMenu && (
+                  <div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        triggerLogoUpload();
+                      }}
+                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
+                    >
+                      <UploadOutlined className="text-sm" />
+                      {formData.logo ? 'Change Logo' : 'Upload Logo'}
+                    </button>
+                    {formData.logo && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemoveLogo();
+                        }}
+                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
+                      >
+                        <DeleteOutlined className="text-sm" />
+                        Remove Logo
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Team Name */}
+            <div className="col-span-10 space-y-2">
+              <label className="block text-sm font-medium text-neutral-700">
+                Team Name <span className="text-danger-500">*</span>
+              </label>
+              <input
+                type="text"
+                className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
+                placeholder="Enter team name"
+                value={formData.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+              />
+              <p className="text-xs text-neutral-500">
+                Click logo to upload or change team logo (circular format)
+              </p>
+            </div>
           </div>
 
           {/* Team Description */}
@@ -224,18 +399,16 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
             <label className="block text-sm font-medium text-neutral-700">
               City <span className="text-danger-500">*</span>
             </label>
-            <select
-              className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-              value={formData.city}
-              onChange={(e) => handleInputChange('city', e.target.value)}
-            >
-              <option value="">Select a city</option>
-              {cities.map((city) => (
-                <option key={city} value={city}>
-                  {city}
-                </option>
-              ))}
-            </select>
+            <CityFilterSelect
+              value={formData.city || 'all'}
+              onChange={(city) =>
+                handleInputChange('city', city === 'all' ? '' : city)
+              }
+              className="w-full"
+              placeholder="Search cities..."
+              allOptionLabel="Select a city"
+              filterIcon={false}
+            />
           </div>
 
           {/* Visibility */}
@@ -323,7 +496,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
               <div className="flex border-b border-neutral-200">
                 <button
                   className={cn(
-                    'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
+                    'px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer',
                     activeTab === 'details'
                       ? 'border-primary-500 text-primary-600'
                       : 'border-transparent text-neutral-500 hover:text-neutral-700'
@@ -334,7 +507,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
                 </button>
                 <button
                   className={cn(
-                    'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
+                    'px-4 py-2 text-sm font-medium border-b-2 transition-colors cursor-pointer',
                     activeTab === 'members'
                       ? 'border-primary-500 text-primary-600'
                       : 'border-transparent text-neutral-500 hover:text-neutral-700'
@@ -356,7 +529,7 @@ const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
                         </label>
                         <div className="p-3 bg-neutral-50 rounded-lg">
                           <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
+                            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden">
                               {leader.user.avatar ? (
                                 <img
                                   src={leader.user.avatar}
diff --git a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/submission-modal.tsx b/apps/backoffice/src/app/(protected)/hackathon-teams/_components/submission-modal.tsx
index 673f0a4..b410988 100644
--- a/apps/backoffice/src/app/(protected)/hackathon-teams/_components/submission-modal.tsx
+++ b/apps/backoffice/src/app/(protected)/hackathon-teams/_components/submission-modal.tsx
@@ -76,7 +76,7 @@ const SubmissionModal: FC<SubmissionModalProps> = ({
               <p className="text-xs text-success-600">
                 Submitted on{' '}
                 {new Date(mockSubmission.submitted_at).toLocaleDateString(
-                  'en-US',
+                  'en-UK',
                   {
                     year: 'numeric',
                     month: 'long',
diff --git a/apps/backoffice/src/components/city-filter-select.tsx b/apps/backoffice/src/components/city-filter-select.tsx
index d6bde6b..9c9d79d 100644
--- a/apps/backoffice/src/components/city-filter-select.tsx
+++ b/apps/backoffice/src/components/city-filter-select.tsx
@@ -8,6 +8,7 @@ interface CityFilterSelectProps {
   className?: string;
   placeholder?: string;
   allOptionLabel?: string;
+  filterIcon?: boolean;
 }
 
 export const CityFilterSelect: FC<CityFilterSelectProps> = ({
@@ -16,6 +17,7 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
   className = '',
   placeholder = 'Search cities...',
   allOptionLabel = 'All Cities',
+  filterIcon = true,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -66,7 +68,9 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
   return (
     <div className={`relative ${className}`} ref={dropdownRef}>
       <div className="relative">
-        <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+        {filterIcon && (
+          <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
+        )}
         <input
           ref={inputRef}
           type="text"
@@ -78,7 +82,9 @@ export const CityFilterSelect: FC<CityFilterSelectProps> = ({
           onClick={handleInputClick}
           onFocus={handleInputClick}
           placeholder={isOpen ? placeholder : displayValue}
-          className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
+          className={`border border-neutral-200 rounded-lg pr-10 py-2.5 text-sm w-full focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer ${
+            filterIcon ? ' pl-10' : 'pl-3'
+          }`}
         />
         {showClearButton && (
           <button
diff --git a/docs/api/hackathon_backoffice_api_contract.md b/docs/api/hackathon_backoffice_api_contract.md
index a576134..bbe5735 100644
--- a/docs/api/hackathon_backoffice_api_contract.md
+++ b/docs/api/hackathon_backoffice_api_contract.md
@@ -391,7 +391,364 @@ DELETE /api/v1/admin/users/550e8400-e29b-41d4-a716-446655440000
 
 ---
 
+## GET /api/v1/admin/teams
+
+### Purpose
+
+Retrieve paginated list of hackathon teams with filtering, searching, and sorting capabilities for backoffice team management.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+- 401 if unauthenticated, 403 if authenticated but lacking required scope.
+
+### Query Parameters
+
+| Parameter      | Type    | Required | Default      | Description                                                                              |
+| -------------- | ------- | -------- | ------------ | ---------------------------------------------------------------------------------------- |
+| `page`         | integer | No       | 1            | Page number (1-based)                                                                    |
+| `limit`        | integer | No       | 10           | Items per page (1-100)                                                                   |
+| `search`       | string  | No       | -            | Search by team name, city, or leader name (case-insensitive)                             |
+| `visibility`   | string  | No       | `all`        | Filter by visibility: `all`, `public`, `private`                                         |
+| `city`         | string  | No       | `all`        | Filter by city or `all`                                                                  |
+| `submission`   | string  | No       | `all`        | Filter by submission status: `all`, `submitted`, `not_submitted`                         |
+| `member_count` | string  | No       | `all`        | Filter by member count: `all`, `1`, `2`, `3`, `4`, `5`                                   |
+| `sort_by`      | string  | No       | `created_at` | Sort field: `name`, `city`, `visibility`, `member_count`, `has_submission`, `created_at` |
+| `sort_order`   | string  | No       | `desc`       | Sort order: `asc`, `desc`                                                                |
+
+### Examples
+
+```
+GET /api/v1/admin/teams
+GET /api/v1/admin/teams?page=2&limit=10
+GET /api/v1/admin/teams?search=innovators&visibility=public
+GET /api/v1/admin/teams?city=Jakarta&submission=submitted&member_count=3
+GET /api/v1/admin/teams?sort_by=name&sort_order=asc
+```
+
+### Response Schema
+
+```jsonc
+{
+  "data": {
+    "teams": [
+      {
+        "id": "team-001",
+        "name": "Team Innovators",
+        "description": "Building innovative solutions for modern problems", // Optional
+        "city": "Jakarta",
+        "banner": "https://example.com/banners/team1.jpg", // Optional
+        "logo": "https://example.com/logos/team1.jpg", // Optional
+        "visibility": "public", // "public" | "private"
+        "member_count": 3,
+        "has_submission": true,
+        "created_at": "2024-11-15T08:30:00Z",
+        "updated_at": "2024-11-30T14:22:00Z",
+        "leader_id": "leader-team-001",
+        "members": [
+          {
+            "id": "member-team-001-0",
+            "joined_at": "2024-11-15T08:30:00Z",
+            "role": "leader", // "leader" | "member"
+            "status": "accepted", // "pending" | "accepted" | "rejected"
+            "team_id": "team-001",
+            "user_id": "leader-team-001",
+            "user": {
+              "id": "leader-team-001",
+              "avatar": "https://ui-avatars.com/api/?name=John+Doe", // Optional
+              "bio": "Passionate developer with 5+ years experience", // Optional
+              "created_at": "2024-10-01T08:30:00Z",
+              "email": "john.doe@example.com",
+              "fullname": "John Doe",
+              "is_active": true,
+              "location": "Jakarta",
+              "phone_number": "+6281234567890", // Optional
+              "skills": ["Frontend Developer", "UI/UX Designer"],
+              "updated_at": "2024-11-30T14:22:00Z"
+            }
+          }
+          // ... more members
+        ]
+      }
+      // ... more teams
+    ],
+    "pagination": {
+      "current_page": 1,
+      "total_pages": 15,
+      "total_items": 147,
+      "items_per_page": 10,
+      "has_next": true,
+      "has_prev": false
+    },
+    "filters": {
+      "available_cities": ["Jakarta", "Bandung", "Surabaya", "Medan", "Yogyakarta"],
+      "available_skills": ["Frontend Developer", "Backend Developer", "Full Stack Developer", "DevOps Engineer", "UI/UX Designer", "Product Manager", "Data Scientist", "Mobile Developer"]
+    }
+  }
+}
+```
+
+---
+
+## GET /api/v1/admin/teams/{team_id}
+
+### Purpose
+
+Retrieve detailed information for a specific team by ID.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+
+### Path Parameters
+
+| Parameter | Type   | Required | Description |
+| --------- | ------ | -------- | ----------- |
+| `team_id` | string | Yes      | Team ID     |
+
+### Examples
+
+```
+GET /api/v1/admin/teams/team-001
+```
+
+### Response Schema
+
+```jsonc
+{
+  "data": {
+    "id": "team-001",
+    "name": "Team Innovators",
+    "description": "Building innovative solutions for modern problems",
+    "city": "Jakarta",
+    "banner": "https://example.com/banners/team1.jpg",
+    "logo": "https://example.com/logos/team1.jpg",
+    "visibility": "public",
+    "member_count": 3,
+    "has_submission": true,
+    "created_at": "2024-11-15T08:30:00Z",
+    "updated_at": "2024-11-30T14:22:00Z",
+    "leader_id": "leader-team-001",
+    "members": [
+      {
+        "id": "member-team-001-0",
+        "joined_at": "2024-11-15T08:30:00Z",
+        "role": "leader",
+        "status": "accepted",
+        "team_id": "team-001",
+        "user_id": "leader-team-001",
+        "user": {
+          "id": "leader-team-001",
+          "avatar": "https://ui-avatars.com/api/?name=John+Doe",
+          "bio": "Passionate developer with 5+ years experience",
+          "created_at": "2024-10-01T08:30:00Z",
+          "email": "john.doe@example.com",
+          "fullname": "John Doe",
+          "is_active": true,
+          "location": "Jakarta",
+          "phone_number": "+6281234567890",
+          "skills": ["Frontend Developer", "UI/UX Designer"],
+          "updated_at": "2024-11-30T14:22:00Z"
+        }
+      }
+      // ... all team members
+    ]
+  }
+}
+```
+
+---
+
+## POST /api/v1/admin/teams
+
+### Purpose
+
+Create a new team in the hackathon system.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+
+### Request Body Schema
+
+```jsonc
+{
+  "name": "Team New Innovators", // Required, 1-100 chars
+  "description": "Building next-gen solutions", // Optional, max 500 chars
+  "city": "Jakarta", // Required, from predefined list
+  "visibility": "public", // Required, "public" | "private"
+  "leader_id": "user-123", // Required, existing user ID
+  "banner": "https://example.com/banners/new.jpg", // Optional, URL
+  "logo": "https://example.com/logos/new.jpg" // Optional, URL
+}
+```
+
+### Response Schema
+
+```jsonc
+{
+  "data": {
+    "id": "team-new-001",
+    "name": "Team New Innovators",
+    "description": "Building next-gen solutions",
+    "city": "Jakarta",
+    "banner": "https://example.com/banners/new.jpg",
+    "logo": "https://example.com/logos/new.jpg",
+    "visibility": "public",
+    "member_count": 1,
+    "has_submission": false,
+    "created_at": "2024-12-02T10:30:00Z",
+    "updated_at": "2024-12-02T10:30:00Z",
+    "leader_id": "user-123",
+    "members": [
+      {
+        "id": "member-new-001-0",
+        "joined_at": "2024-12-02T10:30:00Z",
+        "role": "leader",
+        "status": "accepted",
+        "team_id": "team-new-001",
+        "user_id": "user-123",
+        "user": {
+          "id": "user-123",
+          "fullname": "John Doe",
+          "email": "john.doe@example.com",
+          "location": "Jakarta",
+          "is_active": true,
+          "skills": ["Frontend Developer"],
+          "created_at": "2024-10-01T08:30:00Z",
+          "updated_at": "2024-12-02T10:30:00Z"
+        }
+      }
+    ]
+  }
+}
+```
+
+---
+
+## PUT /api/v1/admin/teams/{team_id}
+
+### Purpose
+
+Update an existing team's information.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+
+### Path Parameters
+
+| Parameter | Type   | Required | Description |
+| --------- | ------ | -------- | ----------- |
+| `team_id` | string | Yes      | Team ID     |
+
+### Request Body Schema
+
+```jsonc
+{
+  "name": "Team Updated Name", // Optional, 1-100 chars
+  "description": "Updated description", // Optional, max 500 chars, null to clear
+  "city": "Bandung", // Optional, from predefined list
+  "visibility": "private", // Optional, "public" | "private"
+  "banner": "https://example.com/banners/updated.jpg", // Optional, URL, null to remove
+  "logo": "https://example.com/logos/updated.jpg" // Optional, URL, null to remove
+}
+```
+
+### Response Schema
+
+Same as GET /api/v1/admin/teams/{team_id} with updated values.
+
+---
+
+## DELETE /api/v1/admin/teams/{team_id}
+
+### Purpose
+
+Delete a team from the hackathon system.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+
+### Path Parameters
+
+| Parameter | Type   | Required | Description |
+| --------- | ------ | -------- | ----------- |
+| `team_id` | string | Yes      | Team ID     |
+
+### Response Schema
+
+```jsonc
+{
+  "data": {
+    "message": "Team successfully deleted",
+    "deleted_team_id": "team-001",
+    "deleted_at": "2024-12-02T10:50:00Z"
+  }
+}
+```
+
+---
+
+## GET /api/v1/admin/teams/{team_id}/submission
+
+### Purpose
+
+Retrieve submission details for a specific team.
+
+### Authentication & Authorization
+
+- Requires admin (backoffice) scope: e.g. `role=admin`
+
+### Path Parameters
+
+| Parameter | Type   | Required | Description |
+| --------- | ------ | -------- | ----------- |
+| `team_id` | string | Yes      | Team ID     |
+
+### Response Schema
+
+```jsonc
+{
+  "data": {
+    "team_id": "team-001",
+    "team_name": "Team Innovators",
+    "project_name": "EcoTrack - Smart Waste Management",
+    "project_description": "An AI-powered waste management solution that helps cities optimize collection routes and reduce environmental impact.",
+    "repository_url": "https://github.com/team-innovators/ecotrack",
+    "demo_url": "https://ecotrack-demo.vercel.app",
+    "presentation_url": "https://docs.google.com/presentation/d/team-innovators-pitch/edit",
+    "submitted_at": "2024-12-01T15:30:00Z",
+    "updated_at": "2024-12-01T16:45:00Z"
+  }
+}
+```
+
+---
+
+## Common Error Responses
+
+### Team Management Endpoints
+
+| Status | Code                   | Message                         | Notes                      |
+| ------ | ---------------------- | ------------------------------- | -------------------------- |
+| 400    | `validation_error`     | `Invalid request data`          | Field validation failures  |
+| 401    | `unauthorized`         | `Authentication required`       | Missing/invalid token      |
+| 403    | `forbidden`            | `Insufficient permissions`      | Lacks required scope       |
+| 404    | `team_not_found`       | `Team not found`                | Invalid team ID            |
+| 404    | `submission_not_found` | `Team submission not found`     | Team has no submission     |
+| 409    | `team_already_exists`  | `Team with name already exists` | Duplicate team name        |
+| 413    | `payload_too_large`    | `Banner/logo file too large`    | Image exceeds size limit   |
+| 422    | `invalid_city`         | `Invalid city specified`        | City not in allowed list   |
+| 422    | `invalid_leader`       | `Invalid leader user ID`        | Leader user does not exist |
+| 429    | `rate_limited`         | `Too many requests`             | Rate limiting              |
+| 500    | `internal_error`       | `Unexpected server error`       | Unhandled exception        |
+
+---
+
 **Revision History**
 
 - v1.0.0 (2025-11-30): Initial contract drafted.
 - v2.0.0 (2025-12-01): Added user management endpoints with filtering, pagination, CRUD operations, and avatar handling.
+- v3.0.0 (2025-12-02): Added team management endpoints based on backoffice implementation with team members, submissions, and comprehensive filtering.