diff --git a/src/main/java/com/boredxgames/tictactoeclient/domain/managers/navigation/Screens.java b/src/main/java/com/boredxgames/tictactoeclient/domain/managers/navigation/Screens.java
index e169161..c29640f 100644
--- a/src/main/java/com/boredxgames/tictactoeclient/domain/managers/navigation/Screens.java
+++ b/src/main/java/com/boredxgames/tictactoeclient/domain/managers/navigation/Screens.java
@@ -7,6 +7,7 @@ public enum Screens {
     GAME_MODE("GameModeScreen"),
     SERVER_CONNECTION("server_connection"),
     AUTHENTICATION("authentication"),
+    PVP_SETUP("pvp_setup"),
     GAME("game_screen");
 
 
diff --git a/src/main/java/com/boredxgames/tictactoeclient/presentation/GameModeScreenController.java b/src/main/java/com/boredxgames/tictactoeclient/presentation/GameModeScreenController.java
index 1562bc2..b0e30e9 100644
--- a/src/main/java/com/boredxgames/tictactoeclient/presentation/GameModeScreenController.java
+++ b/src/main/java/com/boredxgames/tictactoeclient/presentation/GameModeScreenController.java
@@ -53,7 +53,7 @@ private void setupActions() {
         // عند الضغط على الكارد الخاص بالـ Offline
         offlineCard.setOnMouseClicked(e -> {
             System.out.println("Offline Mode Selected");
-            // NavigationManager.navigate(Screens.OFFLINE, NavigationAction.PUSH);
+             NavigationManager.navigate(Screens.PVP_SETUP, NavigationAction.REPLACE);
         });
 
         onlineCard.setOnMouseClicked(e -> {
diff --git a/src/main/java/com/boredxgames/tictactoeclient/presentation/Pvp_setupController.java b/src/main/java/com/boredxgames/tictactoeclient/presentation/Pvp_setupController.java
new file mode 100644
index 0000000..0249349
--- /dev/null
+++ b/src/main/java/com/boredxgames/tictactoeclient/presentation/Pvp_setupController.java
@@ -0,0 +1,84 @@
+/*
+ * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+ * Click nbfs://nbhost/SystemFileSystem/Templates/javafx/FXMLController.java to edit this template
+ */
+package com.boredxgames.tictactoeclient.presentation;
+
+import com.boredxgames.tictactoeclient.domain.managers.navigation.NavigationAction;
+import com.boredxgames.tictactoeclient.domain.managers.navigation.NavigationManager;
+import com.boredxgames.tictactoeclient.domain.managers.navigation.Screens;
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.application.Platform;
+import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.control.ToggleGroup;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.VBox;
+
+/**
+ * FXML Controller class
+ *
+ * @author Hazem
+ */
+public class Pvp_setupController implements Initializable {
+
+    @FXML
+    private Pane backgroundPane;
+    @FXML
+    private VBox contentContainer;
+    @FXML
+    private ToggleGroup starterGroup;
+    @FXML
+    private TextField player1Field;
+    @FXML
+    private TextField player2Field;
+    @FXML
+    private Button startGameBtn;
+    @FXML
+    private Button backBtn;
+
+    @Override
+    public void initialize(URL url, ResourceBundle rb) {
+        backgroundPane.getChildren().clear();
+
+        Platform.runLater(() -> {
+            BackgroundAnimation.animateCardEntry(contentContainer);
+            BackgroundAnimation.startWarpAnimation(
+                    backgroundPane,
+                    backgroundPane.getWidth(),
+                    backgroundPane.getHeight()
+            );
+        });
+    }
+
+    @FXML
+    private void onBackClicked(ActionEvent event) {
+        NavigationManager.navigate(Screens.PRIMARY, NavigationAction.REPLACE);
+    }
+
+    @FXML
+    private void onStartGameClicked(ActionEvent event) {
+        String playerOneName = player1Field.getText().trim();
+        String playerTwoName = player2Field.getText().trim();
+
+        if (playerOneName.isEmpty()) {
+            playerOneName = "Player 1";
+        }
+        if (playerTwoName.isEmpty()) {
+            playerTwoName = "Player 2";
+        }
+
+        boolean isPlayerOneStarter = true;
+        ToggleButton selected = (ToggleButton) starterGroup.getSelectedToggle();
+
+        if (selected != null) {
+            isPlayerOneStarter = selected.getText().contains("Player 1");
+        }
+        //TODO : Navigate to game board 
+    }
+}
diff --git a/src/main/resources/css/features/pvp_setup.css b/src/main/resources/css/features/pvp_setup.css
new file mode 100644
index 0000000..d04867f
--- /dev/null
+++ b/src/main/resources/css/features/pvp_setup.css
@@ -0,0 +1,188 @@
+.root {
+    -fx-background-color: #121121;
+    -fx-font-family: 'Segoe UI', sans-serif;
+}
+
+.background-blur {
+    -fx-background-color: radial-gradient(center 20% 20%, radius 30%, rgba(80, 72, 229, 0.05), transparent),
+                          radial-gradient(center 80% 80%, radius 30%, rgba(88, 28, 135, 0.1), transparent);
+}
+
+.top-bar {
+    -fx-background-color: rgba(18, 17, 33, 0.8);
+    -fx-border-color: transparent transparent #2a2938 transparent;
+    -fx-border-width: 0 0 1 0;
+}
+
+.logo-text {
+    -fx-text-fill: white;
+    -fx-font-size: 20px;
+    -fx-font-weight: bold;
+}
+
+.nav-links > .label {
+    -fx-text-fill: #9f9eb7;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-cursor: hand;
+}
+
+.nav-links > .label:hover {
+    -fx-text-fill: white;
+}
+
+.setup-card {
+    -fx-background-color: #1c1b29;
+    -fx-background-radius: 16;
+    -fx-border-color: #2a2938;
+    -fx-border-radius: 16;
+    -fx-border-width: 1;
+    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.25), 20, 0, 0, 4);
+    -fx-padding: 32;
+    -fx-max-width: 520;
+}
+
+.title-text {
+    -fx-text-fill: white;
+    -fx-font-size: 30px;
+    -fx-font-weight: bold;
+}
+
+.subtitle-text {
+    -fx-text-fill: #9f9eb7;
+    -fx-font-size: 14px;
+    -fx-font-weight: normal;
+}
+
+.section-label {
+    -fx-text-fill: white;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+}
+
+.badge-x {
+    -fx-background-color: rgba(80, 72, 229, 0.15);
+    -fx-text-fill: #5048e5;
+    -fx-font-size: 10px;
+    -fx-font-weight: bold;
+    -fx-padding: 4 10 4 10;
+    -fx-background-radius: 4;
+    -fx-effect: dropshadow(gaussian, rgba(80, 72, 229, 0.8), 15, 0.3, 0, 0);
+}
+
+.badge-o {
+    -fx-background-color: rgba(45, 212, 191, 0.15);
+    -fx-text-fill: #2dd4bf;
+    -fx-font-size: 10px;
+    -fx-font-weight: bold;
+    -fx-padding: 4 10 4 10;
+    -fx-background-radius: 4;
+    -fx-effect: dropshadow(gaussian, rgba(45, 212, 191, 0.8), 15, 0.3, 0, 0);
+}
+
+.input-container {
+    -fx-background-color: #15141b;
+    -fx-background-radius: 12;
+    -fx-border-color: #2a2938;
+    -fx-border-radius: 12;
+    -fx-border-width: 1;
+    -fx-padding: 0;
+}
+
+.input-container:focused-within {
+    -fx-border-color: #5048e5;
+    -fx-border-width: 1;
+}
+
+.input-icon-box {
+    -fx-padding: 0 15 0 15;
+    -fx-alignment: center;
+    -fx-border-color: transparent #2a2938 transparent transparent;
+    -fx-border-width: 0 1 0 0;
+}
+
+.text-field {
+    -fx-background-color: transparent;
+    -fx-text-fill: white;
+    -fx-prompt-text-fill: #4e4e5a;
+    -fx-font-size: 16px;
+    -fx-padding: 15;
+}
+
+.separator-line {
+    -fx-background-color: #2a2938;
+    -fx-max-height: 1;
+}
+
+.separator-text {
+    -fx-background-color: #1c1b29;
+    -fx-text-fill: #9f9eb7;
+    -fx-font-size: 10px;
+    -fx-font-weight: bold;
+    -fx-padding: 0 8 0 8;
+}
+
+.toggle-container {
+    -fx-background-color: #15141b;
+    -fx-background-radius: 12;
+    -fx-border-color: #2a2938;
+    -fx-border-radius: 12;
+    -fx-padding: 4;
+    -fx-spacing: 4;
+}
+
+.toggle-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #9f9eb7;
+    -fx-background-radius: 8;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-cursor: hand;
+    -fx-pref-height: 40;
+}
+
+.toggle-button:selected {
+    -fx-background-color: #1c1b29;
+    -fx-text-fill: white;
+    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.1), 2, 0, 0, 1);
+    -fx-border-color: #2a2938;
+    -fx-border-radius: 8;
+}
+
+.primary-button {
+    -fx-background-color: #5048e5;
+    -fx-text-fill: white;
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+    -fx-background-radius: 12;
+    -fx-pref-height: 56;
+    -fx-cursor: hand;
+    -fx-effect: dropshadow(three-pass-box, rgba(80, 72, 229, 0.4), 15, -5, 0, 0);
+}
+
+.primary-button:hover {
+    -fx-background-color: #4338ca;
+}
+
+.secondary-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #9f9eb7;
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-background-radius: 12;
+    -fx-pref-height: 48;
+    -fx-cursor: hand;
+}
+
+.secondary-button:hover {
+    -fx-text-fill: white;
+    -fx-background-color: rgba(255, 255, 255, 0.05);
+}
+
+.icon-primary { 
+    -fx-fill: #5048e5; 
+    -fx-stroke: transparent;
+    -fx-effect: dropshadow(gaussian, rgba(80, 72, 229, 0.4), 10, 0, 0, 0);
+}
+.icon-white { -fx-fill: white; }
+.icon-gray { -fx-fill: #9f9eb7; }
\ No newline at end of file
diff --git a/src/main/resources/fxml/pvp_setup.fxml b/src/main/resources/fxml/pvp_setup.fxml
new file mode 100644
index 0000000..13a8fd9
--- /dev/null
+++ b/src/main/resources/fxml/pvp_setup.fxml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.control.ToggleButton?>
+<?import javafx.scene.control.ToggleGroup?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.shape.SVGPath?>
+
+<StackPane stylesheets="@../css/features/pvp_setup.css" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.boredxgames.tictactoeclient.presentation.Pvp_setupController">
+
+    <AnchorPane styleClass="root">
+        
+        <Pane fx:id="backgroundPane" styleClass="background-blur" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0" />
+        
+        <HBox alignment="CENTER_LEFT" prefHeight="80.0" spacing="20.0" styleClass="top-bar" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+            <padding>
+                <Insets left="30.0" right="30.0" />
+            </padding>
+            <children>
+                <Label styleClass="logo-text" text="Tic-Tac-Toe" />
+                <Region HBox.hgrow="ALWAYS" />
+                <HBox alignment="CENTER" spacing="30.0" styleClass="nav-links">
+                 
+                </HBox>
+            </children>
+        </HBox>
+
+        <VBox fx:id="contentContainer" alignment="CENTER" fillWidth="false" spacing="24.0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="80.0">
+            
+            <VBox alignment="CENTER" maxWidth="520.0" prefWidth="520.0" spacing="8.0">
+                <HBox alignment="CENTER" spacing="16.0">
+                    <SVGPath content="M10.576 2.837v26.271zM2.839 21.36h26.264zM21.184 2.837v26.271zM2.839 10.752h26.149zM14.158 14.158l3.632 3.632zM14.205 17.742l3.537-3.537zM24.645 3.418l3.632 3.632zM24.692 7.002l3.537-3.537zM3.55 24.895l3.632 3.632zM3.598 28.48l3.537-3.537zM10.31 2.837h0.522v26.271h-0.522v-26.271zM20.959 2.837h0.47v26.272h-0.47v-26.272zM2.839 21.011h26.264v0.348h-26.264v-0.348zM2.839 10.578h26.264v0.348h-26.264v-0.348zM28.384 6.889l-0.257 0.259-3.591-3.571 0.257-0.259 3.591 3.571zM24.785 7.141l-0.256-0.26 3.608-3.555 0.256 0.26-3.608 3.555zM17.892 17.59l-0.257 0.259-3.591-3.572 0.257-0.259 3.591 3.572zM14.292 17.843l-0.256-0.26 3.608-3.555 0.256 0.26-3.608 3.555zM7.291 28.366l-0.257 0.259-3.591-3.572 0.257-0.259 3.591 3.572zM3.69 28.619l-0.256-0.26 3.608-3.555 0.256 0.26-3.608 3.555zM15.974 2.837c-1.396 0-2.527 1.073-2.527 2.397s1.131 2.397 2.527 2.397 2.527-1.073 2.527-2.397-1.131-2.397-2.527-2.397zM15.974 7.267c-1.184 0-2.144-0.91-2.144-2.034s0.96-2.034 2.144-2.034 2.144 0.91 2.144 2.034-0.96 2.034-2.144 2.034zM5.366 2.837c-1.396 0-2.527 1.073-2.527 2.397s1.131 2.397 2.527 2.397 2.527-1.073 2.527-2.397-1.131-2.397-2.527-2.397zM5.366 7.267c-1.184 0-2.144-0.91-2.144-2.034s0.96-2.034 2.144-2.034 2.144 0.91 2.144 2.034-0.96 2.034-2.144 2.034zM26.461 13.538c-1.396 0-2.527 1.073-2.527 2.397s1.131 2.397 2.527 2.397c1.396 0 2.527-1.073 2.527-2.397s-1.131-2.397-2.527-2.397zM26.461 17.969c-1.184 0-2.144-0.91-2.144-2.034s0.96-2.034 2.144-2.034c1.184 0 2.144 0.91 2.144 2.034s-0.96 2.034-2.144 2.034zM15.922 24.314c-1.396 0-2.527 1.073-2.527 2.397s1.131 2.397 2.527 2.397 2.527-1.073 2.527-2.397-1.131-2.397-2.527-2.397zM15.922 28.745c-1.184 0-2.144-0.91-2.144-2.034s0.96-2.034 2.144-2.034 2.144 0.91 2.144 2.034-0.96 2.034-2.144 2.034z" scaleX="1.2" scaleY="1.2" styleClass="icon-primary" />
+                    <Label styleClass="title-text" text="Offline PVP" />
+                </HBox>
+                <Label alignment="CENTER" contentDisplay="CENTER" styleClass="subtitle-text" text="Configure players for a local match." />
+            </VBox>
+
+            <VBox prefWidth="520.0" spacing="32.0" styleClass="setup-card">
+                
+                <VBox spacing="24.0">
+                    <VBox spacing="8.0">
+                        <HBox alignment="CENTER_LEFT">
+                            <Label styleClass="section-label" text="Player 1 Name" />
+                            <Region HBox.hgrow="ALWAYS" />
+                            <Label styleClass="badge-x" text="PLAY AS X" />
+                        </HBox>
+                        <HBox alignment="CENTER_LEFT" styleClass="input-container">
+                            <HBox styleClass="input-icon-box">
+                                <SVGPath content="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" styleClass="icon-gray" />
+                            </HBox>
+                            <TextField fx:id="player1Field" promptText="Enter name..." text="Player 1" HBox.hgrow="ALWAYS" />
+                        </HBox>
+                    </VBox>
+
+                    <StackPane>
+                        <Region styleClass="separator-line" />
+                        <Label styleClass="separator-text" text="VS" />
+                    </StackPane>
+
+                    <VBox spacing="8.0">
+                        <HBox alignment="CENTER_LEFT">
+                            <Label styleClass="section-label" text="Player 2 Name" />
+                            <Region HBox.hgrow="ALWAYS" />
+                            <Label styleClass="badge-o" text="PLAY AS O" />
+                        </HBox>
+                        <HBox alignment="CENTER_LEFT" styleClass="input-container">
+                            <HBox styleClass="input-icon-box">
+                                <SVGPath content="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" styleClass="icon-gray" />
+                            </HBox>
+                            <TextField fx:id="player2Field" promptText="Enter name..." HBox.hgrow="ALWAYS" />
+                        </HBox>
+                    </VBox>
+                </VBox>
+
+                <VBox spacing="12.0">
+                    <Label styleClass="section-label" text="Who goes first?" />
+                    <HBox styleClass="toggle-container">
+                        <fx:define>
+                           
+                        </fx:define>
+                        <ToggleButton maxWidth="Infinity" selected="true" styleClass="toggle-button" text="Player 1 (X)" HBox.hgrow="ALWAYS">
+                             <toggleGroup>
+                                <ToggleGroup fx:id="starterGroup" />
+                             </toggleGroup>
+                        </ToggleButton>
+                        <ToggleButton maxWidth="Infinity" styleClass="toggle-button" text="Player 2 (O)" toggleGroup="$starterGroup" HBox.hgrow="ALWAYS" />
+                    </HBox>
+                </VBox>
+
+                <VBox spacing="12.0">
+                    <Button fx:id="startGameBtn" onAction="#onStartGameClicked" maxWidth="Infinity" styleClass="primary-button" text="Start Game">
+                        <graphic>
+                            <SVGPath content="M8 5v14l11-7z" style="-fx-translate-x: -4;" styleClass="icon-white" />
+                        </graphic>
+                    </Button>
+                    <Button fx:id="backBtn" onAction="#onBackClicked" maxWidth="Infinity" styleClass="secondary-button" text="Back to Menu">
+                        <graphic>
+                            <SVGPath content="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" style="-fx-translate-x: -4;" styleClass="icon-gray" />
+                        </graphic>                    
+                    </Button>
+                </VBox>
+
+            </VBox>
+        </VBox>
+    </AnchorPane>
+</StackPane>
\ No newline at end of file