diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx
index b798532..be4057f 100644
--- a/front/components/editor/BallPiece.tsx
+++ b/front/components/editor/BallPiece.tsx
@@ -1,7 +1,7 @@
 import "../../style/ball.css"
 
 import BallSvg from "../../assets/icon/ball.svg?react"
-import {Ball} from "../../tactic/CourtObjects";
+import { Ball } from "../../tactic/CourtObjects"
 
 export interface CourtBallProps {
     onMoved: (rect: DOMRect) => void
@@ -10,8 +10,5 @@ export interface CourtBallProps {
 }
 
 export function BallPiece() {
-    return (
-        <BallSvg className={"ball"}/>
-    )
+    return <BallSvg className={"ball"} />
 }
-
diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx
index 9950775..4545f9a 100644
--- a/front/components/editor/BasketCourt.tsx
+++ b/front/components/editor/BasketCourt.tsx
@@ -1,10 +1,10 @@
 import "../../style/basket_court.css"
-import {RefObject} from "react"
+import { RefObject } from "react"
 import CourtPlayer from "./CourtPlayer"
 
-import {Player} from "../../tactic/Player"
-import {CourtObject} from "../../tactic/CourtObjects";
-import {CourtBall} from "./CourtBall";
+import { Player } from "../../tactic/Player"
+import { CourtObject } from "../../tactic/CourtObjects"
+import { CourtBall } from "./CourtBall"
 
 export interface BasketCourtProps {
     players: Player[]
@@ -13,31 +13,30 @@ export interface BasketCourtProps {
     onPlayerRemove: (p: Player) => void
     onPlayerChange: (p: Player) => void
 
-    onBallRemove : () => void
+    onBallRemove: () => void
 
-    onBallMoved: (ball: DOMRect) => void,
+    onBallMoved: (ball: DOMRect) => void
 
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
 }
 
 export function BasketCourt({
-                                players,
-                                objects,
-                                onPlayerRemove,
-                                onBallRemove,
-                                onBallMoved,
-                                onPlayerChange,
-                                courtImage,
-                                courtRef,
-                            }: BasketCourtProps) {
-
+    players,
+    objects,
+    onPlayerRemove,
+    onBallRemove,
+    onBallMoved,
+    onPlayerChange,
+    courtImage,
+    courtRef,
+}: BasketCourtProps) {
     return (
         <div
             id="court-container"
             ref={courtRef}
-            style={{position: "relative"}}>
-            <img src={courtImage} alt={"court"} id="court-svg"/>
+            style={{ position: "relative" }}>
+            <img src={courtImage} alt={"court"} id="court-svg" />
             {players.map((player) => {
                 return (
                     <CourtPlayer
@@ -51,19 +50,19 @@ export function BasketCourt({
                 )
             })}
 
-            {objects.map(object => {
+            {objects.map((object) => {
                 if (object.type == "ball") {
-                    return <CourtBall
-                        onMoved={onBallMoved}
-                        ball={object}
-                        onRemove={onBallRemove}
-                        key="ball"
-                    />
+                    return (
+                        <CourtBall
+                            onMoved={onBallMoved}
+                            ball={object}
+                            onRemove={onBallRemove}
+                            key="ball"
+                        />
+                    )
                 }
                 throw new Error("unknown court object", object.type)
             })}
         </div>
     )
 }
-
-
diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx
index 8d0c9be..f2c32e6 100644
--- a/front/components/editor/CourtBall.tsx
+++ b/front/components/editor/CourtBall.tsx
@@ -1,9 +1,8 @@
-import React, {useRef} from "react";
-import Draggable from "react-draggable";
-import {BallPiece, CourtBallProps} from "./BallPiece";
+import React, { useRef } from "react"
+import Draggable from "react-draggable"
+import { BallPiece, CourtBallProps } from "./BallPiece"
 
-
-export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
+export function CourtBall({ onMoved, ball, onRemove }: CourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
 
     const x = ball.rightRatio
@@ -12,22 +11,21 @@ export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
     return (
         <Draggable
             onStop={() => onMoved(pieceRef.current!.getBoundingClientRect())}
-            nodeRef={pieceRef}
-        >
-            <div className={"ball-div"}
-                 ref={pieceRef}
-                 tabIndex={0}
-                 onKeyUp={(e) => {
-                     if (e.key == "Delete") onRemove()
-                 }}
-                 style={{
-                     position: "absolute",
-                     left: `${x * 100}%`,
-                     top: `${y * 100}%`,
-                 }}
-            >
-                <BallPiece/>
+            nodeRef={pieceRef}>
+            <div
+                className={"ball-div"}
+                ref={pieceRef}
+                tabIndex={0}
+                onKeyUp={(e) => {
+                    if (e.key == "Delete") onRemove()
+                }}
+                style={{
+                    position: "absolute",
+                    left: `${x * 100}%`,
+                    top: `${y * 100}%`,
+                }}>
+                <BallPiece />
             </div>
         </Draggable>
     )
-}
\ No newline at end of file
+}
diff --git a/front/components/editor/CourtPlayer.tsx b/front/components/editor/CourtPlayer.tsx
index 045d5d0..8299050 100644
--- a/front/components/editor/CourtPlayer.tsx
+++ b/front/components/editor/CourtPlayer.tsx
@@ -1,10 +1,10 @@
-import {RefObject, useRef} from "react"
+import { RefObject, useRef } from "react"
 import "../../style/player.css"
-import {BallPiece} from "./BallPiece"
+import { BallPiece } from "./BallPiece"
 import Draggable from "react-draggable"
-import {PlayerPiece} from "./PlayerPiece"
-import {Player} from "../../tactic/Player"
-import {calculateRatio} from "../../Utils"
+import { PlayerPiece } from "./PlayerPiece"
+import { Player } from "../../tactic/Player"
+import { calculateRatio } from "../../Utils"
 
 export interface PlayerProps {
     player: Player
@@ -68,13 +68,20 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        {hasBall && (<Draggable nodeRef={ballPiece}
-                                                onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}
-                                                position={{x:0, y: 0}}>
-                            <div ref={ballPiece}>
-                                <BallPiece />
-                            </div>
-                        </Draggable>)}
+                        {hasBall && (
+                            <Draggable
+                                nodeRef={ballPiece}
+                                onStop={() =>
+                                    onBallDrop(
+                                        ballPiece.current!.getBoundingClientRect(),
+                                    )
+                                }
+                                position={{ x: 0, y: 0 }}>
+                                <div ref={ballPiece}>
+                                    <BallPiece />
+                                </div>
+                            </Draggable>
+                        )}
                     </div>
                     <PlayerPiece
                         team={player.team}
diff --git a/front/style/ball.css b/front/style/ball.css
index 834c4ae..5169ec7 100644
--- a/front/style/ball.css
+++ b/front/style/ball.css
@@ -8,9 +8,7 @@
     width: 20px;
     height: 20px;
     cursor: pointer;
-    tabIndex: 0;
 }
 
 .ball-div:focus-within {
-
-}
\ No newline at end of file
+}
diff --git a/front/style/editor.css b/front/style/editor.css
index 301bc1b..93860c7 100644
--- a/front/style/editor.css
+++ b/front/style/editor.css
@@ -32,6 +32,8 @@
 #racks {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    height: 25px;
 }
 
 .title-input {
@@ -46,6 +48,10 @@
 #allies-rack {
     width: 125px;
     min-width: 125px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-start;
 }
 
 #opponent-rack {
@@ -111,5 +117,3 @@
 .save-state-guest {
     color: gray;
 }
-
-
diff --git a/front/tactic/CourtObjects.ts b/front/tactic/CourtObjects.ts
index 1dba5c2..28e4830 100644
--- a/front/tactic/CourtObjects.ts
+++ b/front/tactic/CourtObjects.ts
@@ -1,13 +1,10 @@
-
-
-export type CourtObject = {type: "ball"} & Ball
-
+export type CourtObject = { type: "ball" } & Ball
 
 export interface Ball {
     /**
      * The ball is a "ball" court object
      */
-    readonly type: "ball",
+    readonly type: "ball"
 
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
diff --git a/front/tactic/Tactic.ts b/front/tactic/Tactic.ts
index 843600d..8e06331 100644
--- a/front/tactic/Tactic.ts
+++ b/front/tactic/Tactic.ts
@@ -1,5 +1,5 @@
 import { Player } from "./Player"
-import {CourtObject} from "./CourtObjects";
+import { CourtObject } from "./CourtObjects"
 
 export interface Tactic {
     id: number
diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx
index bd1f430..323a4ed 100644
--- a/front/views/Editor.tsx
+++ b/front/views/Editor.tsx
@@ -1,4 +1,11 @@
-import {CSSProperties, Dispatch, SetStateAction, useCallback, useRef, useState,} from "react"
+import {
+    CSSProperties,
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useRef,
+    useState,
+} from "react"
 import "../style/editor.css"
 import TitleInput from "../components/TitleInput"
 import { BasketCourt } from "../components/editor/BasketCourt"
@@ -7,23 +14,23 @@ import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
 
+import { BallPiece } from "../components/editor/BallPiece"
+
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
-
-import {BallPiece, CourtBall} from "../components/editor/BallPiece";
-
+import { Player } from "../tactic/Player"
 
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
 import { Team } from "../tactic/Team"
 import { calculateRatio } from "../Utils"
+
 import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
 
 import {CourtObject} from "../tactic/CourtObjects";
-import {Simulate} from "react-dom/test-utils";
 
 
 const ERROR_STYLE: CSSProperties = {
@@ -57,12 +64,14 @@ interface RackedPlayer {
 
 type RackedCourtObject = { key: "ball" }
 
+
 export default function Editor({
                                    id,
                                    name,
                                    courtType,
                                    content,
                                }: EditorProps) {
+
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -101,17 +110,17 @@ export default function Editor({
                     (r) => r.ok,
                 )
             }}
-            courtType={courtType}/>
+            courtType={courtType}
+        />
     )
 }
 
 function EditorView({
-                        tactic: {id, name, content: initialContent},
-                        onContentChange,
-                        onNameChange,
-                        courtType,
-                    }: EditorViewProps) {
-
+    tactic: { id, name, content: initialContent },
+    onContentChange,
+    onNameChange,
+    courtType,
+}: EditorViewProps) {
     const isInGuestMode = id == -1
 
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@@ -128,12 +137,14 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
-    const [objects, setObjects] = useState<RackedCourtObject[]>(isBallOnCourt(content) ? [] : [{key: "ball"}])
+    const [objects, setObjects] = useState<RackedCourtObject[]>(
+        isBallOnCourt(content) ? [] : [{ key: "ball" }],
+    )
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
 
-    const canDetach = (bounds: DOMRect) => {
+    const isBoundsOnCourt = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
         // check if refBounds overlaps courtBounds
@@ -145,8 +156,6 @@ function EditorView({
         )
     }
 
-
-
     const onPieceDetach = (ref: HTMLDivElement, element: RackedPlayer) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
@@ -171,33 +180,40 @@ function EditorView({
         })
     }
 
-    const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => {
+    const onObjectDetach = (
+        ref: HTMLDivElement,
+        rackedObject: RackedCourtObject,
+    ) => {
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
-        const {x, y} = calculateRatio(refBounds, courtBounds)
+        const { x, y } = calculateRatio(refBounds, courtBounds)
 
         let courtObject: CourtObject
 
         switch (rackedObject.key) {
             case "ball":
-                const ballObj = content.objects.findIndex(o => o.type == "ball")
-                const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
-                if(playerCollidedIdx != -1) {
+                const ballObj = content.objects.findIndex(
+                    (o) => o.type == "ball",
+                )
+                const playerCollidedIdx = getPlayerCollided(
+                    refBounds,
+                    content.players,
+                )
+                if (playerCollidedIdx != -1) {
                     onBallDropOnPlayer(playerCollidedIdx)
                     setContent((content) => {
-                        return{
+                        return {
                             ...content,
-                            objects : content.objects.toSpliced(ballObj, 1)
+                            objects: content.objects.toSpliced(ballObj, 1),
                         }
                     })
                     return
-                }
-                else {
+                } else {
                     courtObject = {
                         type: "ball",
                         rightRatio: x,
-                        bottomRatio: y
+                        bottomRatio: y,
                     }
                 }
                 break
@@ -207,81 +223,100 @@ function EditorView({
         }
 
         setContent((content) => {
-            return ({
+            return {
                 ...content,
-                objects: [
-                    ...content.objects,
-                    courtObject,
-                ]
-            })
+                objects: [...content.objects, courtObject],
+            }
         })
     }
 
-    const getPlayerCollided = (bounds: DOMRect, players: Player[]): number | -1 => {
+    const getPlayerCollided = (
+        bounds: DOMRect,
+        players: Player[],
+    ): number | -1 => {
         for (let i = 0; i < players.length; i++) {
             const player = players[i]
-            const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
+            const playerBounds = document
+                .getElementById(player.id)!
+                .getBoundingClientRect()
             const doesOverlap = !(
                 bounds.top > playerBounds.bottom ||
                 bounds.right < playerBounds.left ||
                 bounds.bottom < playerBounds.top ||
                 bounds.left > playerBounds.right
             )
-            if(doesOverlap) {
+            if (doesOverlap) {
                 return i
             }
         }
         return -1
     }
 
-
-    const onBallDropOnPlayer = (playerCollidedIdx : number) => {
+    const onBallDropOnPlayer = (playerCollidedIdx: number) => {
         setContent((content) => {
-            const ballObj = content.objects.findIndex(o => o.type == "ball")
+            const ballObj = content.objects.findIndex((o) => o.type == "ball")
             let player = content.players.at(playerCollidedIdx) as Player
             return {
                 ...content,
-                players: content.players.toSpliced(playerCollidedIdx, 1, {...player, hasBall: true}),
-                objects : content.objects.toSpliced(ballObj, 1)
+                players: content.players.toSpliced(playerCollidedIdx, 1, {
+                    ...player,
+                    hasBall: true,
+                }),
+                objects: content.objects.toSpliced(ballObj, 1),
             }
         })
     }
 
     const onBallDrop = (refBounds: DOMRect) => {
+        if (!isBoundsOnCourt(refBounds)) {
+            setContent((content) => {
+                const ballObj = content.objects.findIndex(
+                    (o) => o.type == "ball",
+                )
+                return {
+                    ...content,
+                    objects: content.objects.toSpliced(ballObj, 1),
+                }
+            })
+            setObjects([{ key: "ball" }])
+        }
         const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
-        if(playerCollidedIdx != -1) {
+        if (playerCollidedIdx != -1) {
             setContent((content) => {
                 return {
                     ...content,
-                    players: content.players.map((player) => ({...player, hasBall: false})),
+                    players: content.players.map((player) => ({
+                        ...player,
+                        hasBall: false,
+                    })),
                 }
             })
             onBallDropOnPlayer(playerCollidedIdx)
             return
         }
 
-        if(content.objects.findIndex(o => o.type == "ball") != -1) {
+        if (content.objects.findIndex((o) => o.type == "ball") != -1) {
             return
         }
 
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
-        const {x, y} = calculateRatio(refBounds, courtBounds)
+        const { x, y } = calculateRatio(refBounds, courtBounds)
         let courtObject: CourtObject
 
         courtObject = {
             type: "ball",
             rightRatio: x,
-            bottomRatio: y
+            bottomRatio: y,
         }
 
         setContent((content) => {
             return {
                 ...content,
-                players: content.players.map((player) => ({...player, hasBall: false})),
-                objects: [
-                    ...content.objects,
-                    courtObject,
-                ]
+                players: content.players.map((player) => ({
+                    ...player,
+                    hasBall: false,
+                })),
+                objects: [...content.objects, courtObject],
             }
         })
     }
@@ -292,7 +327,7 @@ function EditorView({
                 <div id="topbar-left">
 
                     <SavingState state={saveState}/>
-
+                    
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -313,7 +348,9 @@ function EditorView({
                         id="allies-rack"
                         objects={allies}
                         onChange={setAllies}
-                        canDetach={div => canDetach(div.getBoundingClientRect())}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -325,18 +362,24 @@ function EditorView({
                         )}
                     />
 
-                    <Rack id={"objects"}
-                          objects={objects}
-                          onChange={setObjects}
-                          canDetach={div => canDetach(div.getBoundingClientRect())}
-                          onElementDetached={onObjectDetach}
-                          render={renderCourtObject}/>
+                    <Rack
+                        id={"objects"}
+                        objects={objects}
+                        onChange={setObjects}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
+                        onElementDetached={onObjectDetach}
+                        render={renderCourtObject}
+                    />
 
                     <Rack
                         id="opponent-rack"
                         objects={opponents}
                         onChange={setOpponents}
-                        canDetach={div => canDetach(div.getBoundingClientRect())}
+                        canDetach={(div) =>
+                            isBoundsOnCourt(div.getBoundingClientRect())
+                        }
                         onElementDetached={onPieceDetach}
                         render={({ team, key }) => (
                             <PlayerPiece
@@ -376,9 +419,7 @@ function EditorView({
                                         player,
                                         false,
                                     ),
-                                    objects: [
-                                        ...content.objects,
-                                    ]
+                                    objects: [...content.objects],
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -389,7 +430,7 @@ function EditorView({
                                         setter = setAllies
                                 }
                                 if (player.hasBall) {
-                                    setObjects([{key: "ball"}])
+                                    setObjects([{ key: "ball" }])
                                 }
                                 setter((players) => [
                                     ...players,
@@ -402,13 +443,18 @@ function EditorView({
                             }}
                             onBallRemove={() => {
                                 setContent((content) => {
-                                    const ballObj = content.objects.findIndex(o => o.type == "ball")
+                                    const ballObj = content.objects.findIndex(
+                                        (o) => o.type == "ball",
+                                    )
                                     return {
                                         ...content,
-                                        objects: content.objects.toSpliced(ballObj, 1)
+                                        objects: content.objects.toSpliced(
+                                            ballObj,
+                                            1,
+                                        ),
                                     }
                                 })
-                                setObjects([{key: "ball"}])
+                                setObjects([{ key: "ball" }])
                             }}
                         />
                     </div>
@@ -418,16 +464,16 @@ function EditorView({
     )
 }
 
-function isBallOnCourt(content : TacticContent) {
-    if(content.players.findIndex(p => p.hasBall) != -1) {
+function isBallOnCourt(content: TacticContent) {
+    if (content.players.findIndex((p) => p.hasBall) != -1) {
         return true
     }
-    return content.objects.findIndex(o => o.type == "ball") != -1
+    return content.objects.findIndex((o) => o.type == "ball") != -1
 }
 
 function renderCourtObject(courtObject: RackedCourtObject) {
     if (courtObject.key == "ball") {
-        return <BallPiece/>
+        return <BallPiece />
     }
     throw new Error("unknown racked court object ", courtObject.key)
 }