Telegram Q&A UI implemented.

src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java

@@ -364,10 +364,31 @@ public class SidebarMenuController {
         }
     }
 
-    private void openTelegramFeatures() { System.out.println("Opening Telegram Features..."); }
+    private void openTelegramFeatures() {
-    private void openTelegramQnA() { System.out.println("Opening Telegram Q&A..."); }
+        try {
+            FXMLLoader loader = new FXMLLoader(getClass().getResource(
+                    "/org/to/telegramfinalproject/Fxml/telegram_features.fxml"));
+            Node featuresOverlay = loader.load();
 
+            MainController.getInstance().showOverlay(featuresOverlay);
 
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    private void openTelegramQnA() {
+        try {
+            FXMLLoader loader = new FXMLLoader(getClass().getResource(
+                    "/org/to/telegramfinalproject/Fxml/telegram_qna.fxml"));
+            Node qnaOverlay = loader.load();
+
+            MainController.getInstance().showOverlay(qnaOverlay);
+
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
 
     public void setUserFromSession(JSONObject user) {
         if (user == null) return;

src/main/java/org/to/telegramfinalproject/UI/TelegramQnAController.java

@@ -0,0 +1,41 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.application.Platform;
+import javafx.fxml.FXML;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.StackPane;
+
+public class TelegramQnAController {
+
+    @FXML private StackPane rootOverlay;
+    @FXML private Pane overlayBackground;
+    @FXML private ScrollPane qnaScroll;
+    @FXML private BorderPane contentCard;
+
+    @FXML
+    private void initialize() {
+        // Clicking outside closes overlay
+        overlayBackground.setOnMouseClicked(e ->
+                MainController.getInstance().closeOverlay(rootOverlay)
+        );
+
+        // Smooth scroll feel
+        qnaScroll.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
+        qnaScroll.setPannable(true);
+        qnaScroll.setFitToWidth(true);
+        qnaScroll.setFitToHeight(false);
+        qnaScroll.getContent().setOnScroll(event -> {
+            double deltaY = event.getDeltaY() * 0.003;
+            qnaScroll.setVvalue(qnaScroll.getVvalue() - deltaY);
+        });
+
+        // Register scene for ThemeManager → stylesheet swap will handle colors/icons
+        Platform.runLater(() -> {
+            if (contentCard.getScene() != null) {
+                ThemeManager.getInstance().registerScene(contentCard.getScene());
+            }
+        });
+    }
+}

src/main/resources/org/to/telegramfinalproject/Fxml/telegram_qna.fxml

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.geometry.Insets?>
+
+<StackPane xmlns:fx="http://javafx.com/fxml"
+           fx:id="rootOverlay"
+           fx:controller="org.to.telegramfinalproject.UI.TelegramQnAController"
+           styleClass="overlay-root">
+
+    <!-- Background (click to close) -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Content card -->
+    <BorderPane fx:id="contentCard"
+                styleClass="tf-root"
+                maxWidth="700" maxHeight="520">
+
+        <!-- Header -->
+        <top>
+            <HBox spacing="10" styleClass="tf-toolbar">
+                <children>
+                    <Label text="Telegram FAQ" styleClass="tf-title"/>
+                    <Region HBox.hgrow="ALWAYS"/>
+                    <Label text="(frequently asked questions)" styleClass="tf-caption"/>
+                </children>
+            </HBox>
+        </top>
+
+        <!-- Scrollable content -->
+        <center>
+            <ScrollPane fx:id="qnaScroll" fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
+                <content>
+                    <VBox spacing="20" styleClass="tf-sections">
+                        <padding>
+                            <Insets top="8" right="16" bottom="8" left="16"/>
+                        </padding>
+
+                        <!-- FAQ Item -->
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="1) How do I create a new account?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Download the Telegram app, enter your phone number, and confirm it with the SMS code. Then you can set up your name and profile picture."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="2) How can I add a new contact?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Tap the menu, choose 'Contacts', then 'Add Contact'. Enter the phone number and name. Telegram will link it to their account automatically."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="3) How do I start a private chat?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Open the contact’s profile and tap 'Message'. This will create a private chat window with them."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="4) How can I create a group?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Go to the menu, select 'New Group', choose members, and set a group name and picture."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="5) How do channels work?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Channels let you broadcast messages to large audiences. Only admins can post, but everyone who subscribes receives the updates."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="6) How can I search for messages?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Use the search bar at the top of the chat list for global search, or use the search option inside a chat to find specific messages."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="7) How do I delete or edit a message?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Long-press (or right-click) on your message. Choose 'Edit' to change it or 'Delete' to remove it. You can delete for yourself or for everyone if allowed."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="8) How can I use reactions?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Tap and hold on a message, then choose an emoji reaction to express your feedback instantly."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="9) How do I archive chats?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Swipe left on a chat (mobile) or right-click on it (desktop) and choose 'Archive'. Archived chats are hidden in a separate folder until a new message arrives."/>
+                        </VBox>
+
+                        <VBox spacing="6" styleClass="tf-section">
+                            <Label text="10) How can I enable Dark Mode?" styleClass="tf-section-title"/>
+                            <Label wrapText="true" styleClass="tf-item-desc"
+                                   text="Open 'Settings' → 'Appearance' and switch between Light and Dark themes. You can also schedule it automatically."/>
+                        </VBox>
+                    </VBox>
+                </content>
+            </ScrollPane>
+        </center>
+
+        <padding>
+            <Insets top="8" right="8" bottom="8" left="8"/>
+        </padding>
+    </BorderPane>
+</StackPane>