UI Done

.gitignore

@@ -0,0 +1,15 @@
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel target="17" />
+  </component>
+</project>

.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <value>
+      <entry key="CountryItemPreview">
+        <State />
+      </entry>
+      <entry key="app">
+        <State />
+      </entry>
+    </value>
+  </component>
+</project>

.idea/gradle.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
+  <component name="GradleSettings">
+    <option name="linkedExternalProjectsSettings">
+      <GradleProjectSettings>
+        <option name="externalProjectPath" value="$PROJECT_DIR$" />
+        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="modules">
+          <set>
+            <option value="$PROJECT_DIR$" />
+            <option value="$PROJECT_DIR$/app" />
+          </set>
+        </option>
+        <option name="resolveExternalAnnotations" value="false" />
+      </GradleProjectSettings>
+    </option>
+  </component>
+</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,41 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

.idea/kotlinc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="KotlinJpsPluginSettings">
+    <option name="version" value="1.9.0" />
+  </component>
+</project>

.idea/migrations.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,9 @@
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

.idea/other.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ScreenshotViewer">
+    <option name="frameScreenshot" value="true" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

app/.gitignore

@@ -0,0 +1 @@
+/build

app/build.gradle.kts

@@ -0,0 +1,74 @@
+plugins {
+    id("com.android.application")
+    id("org.jetbrains.kotlin.android")
+}
+
+android {
+    namespace = "com.vpn.fastestvpnservice"
+    compileSdk = 34
+
+    defaultConfig {
+        applicationId = "com.vpn.fastestvpnservice"
+        minSdk = 21
+        targetSdk = 34
+        versionCode = 1
+        versionName = "1.0"
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary = true
+        }
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_1_8
+        targetCompatibility = JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+    buildFeatures {
+        compose = true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.1"
+    }
+    packaging {
+        resources {
+            excludes += "/META-INF/{AL2.0,LGPL2.1}"
+        }
+    }
+}
+
+dependencies {
+
+    implementation("androidx.core:core-ktx:1.12.0")
+    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
+    implementation("androidx.activity:activity-compose:1.8.2")
+    implementation(platform("androidx.compose:compose-bom:2023.08.00"))
+    implementation("androidx.compose.ui:ui")
+    implementation("androidx.compose.ui:ui-graphics")
+    implementation("androidx.compose.ui:ui-tooling-preview")
+    implementation("androidx.compose.material3:material3:1.1.2")
+    implementation("androidx.compose.material:material:1.6.0")
+    implementation("androidx.navigation:navigation-compose:2.7.6")
+    implementation("androidx.compose.material:material-icons-extended:1.5.4")
+    implementation("androidx.compose.ui:ui-text-google-fonts:1.5.4")
+
+    testImplementation("junit:junit:4.13.2")
+    androidTestImplementation("androidx.test.ext:junit:1.1.5")
+    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
+    androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
+    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
+    debugImplementation("androidx.compose.ui:ui-tooling")
+    debugImplementation("androidx.compose.ui:ui-test-manifest")
+}

app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

app/src/androidTest/java/com/vpn/fastestvpnservice/ExampleInstrumentedTest.kt

@@ -0,0 +1,24 @@
+package com.vpn.fastestvpnservice
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("com.vpn.fastestvpnservice", appContext.packageName)
+    }
+}

app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+        android:allowBackup="true"
+        android:dataExtractionRules="@xml/data_extraction_rules"
+        android:fullBackupContent="@xml/backup_rules"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.FastestVPN"
+        tools:targetApi="31">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:label="@string/app_name"
+            android:theme="@style/Theme.FastestVPN">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

app/src/main/java/com/vpn/fastestvpnservice/MainActivity.kt

@@ -0,0 +1,53 @@
+package com.vpn.fastestvpnservice
+
+import android.os.Bundle
+import android.util.Log
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.beans.isDarkTheme
+import com.vpn.fastestvpnservice.beans.selectedtheme
+import com.vpn.fastestvpnservice.beans.themesList
+import com.vpn.fastestvpnservice.navigation.SetUpNavGraph
+import com.vpn.fastestvpnservice.ui.theme.FastestVPNTheme
+
+class MainActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+
+            val isSystemInDarkTheme = isSystemInDarkTheme()
+            val systemTheme by remember { mutableStateOf(isSystemInDarkTheme) }
+            if (selectedtheme.value == themesList[0])
+            {
+                Log.d("test_theme", "System 0 -> ${selectedtheme.value}")
+                isDarkTheme.value = systemTheme
+            }
+
+            FastestVPNTheme(isDarkTheme.value) {
+                window.statusBarColor = colorResource(id = R.color.blue_text).toArgb()
+                val navController = rememberNavController()
+                SetUpNavGraph(navHostController = navController)
+            }
+
+        }
+    }
+}
+

app/src/main/java/com/vpn/fastestvpnservice/beans/Dark_Light_Theme.kt

@@ -0,0 +1,12 @@
+package com.vpn.fastestvpnservice.beans
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+
+val themesList = listOf<String>(
+    "System Default", "Light Theme", "Dark Theme"
+)
+
+var isDarkTheme: MutableState<Boolean> = mutableStateOf(false)
+
+var selectedtheme: MutableState<String> = mutableStateOf(themesList[0])

app/src/main/java/com/vpn/fastestvpnservice/beans/Server.kt

@@ -0,0 +1,91 @@
+package com.vpn.fastestvpnservice.beans
+
+import androidx.compose.ui.graphics.painter.Painter
+import com.vpn.fastestvpnservice.R
+
+data class Server(
+    val country: String,
+    val serverName: String,
+    val ping: String,
+    val icon: Int
+)
+
+data class CountryServer(
+    val country: String,
+    val icon: Int,
+    val server: List<Server>?
+)
+
+val favList = listOf(
+    Server("Spain", "Barcelona", "130ms", R.drawable.spainlogo3x),
+//    Server("Spain", "Barcelona", "130ms", R.drawable.spainlogo3x),
+//    Server("Spain", "Barcelona", "130ms", R.drawable.spainlogo3x)
+)
+
+val favServersList = listOf(
+    Server("Spain", "Barcelona", "95ms", R.drawable.spainlogo3x),
+    Server("Pakistan", "Karachi", "95ms", R.drawable.pklogo3x),
+    Server("Spain", "Rome", "95ms", R.drawable.spainlogo3x),
+    Server("Pakistan", "Lahore", "95ms", R.drawable.pklogo3x),
+    Server("Spain", "Italy", "95ms", R.drawable.spainlogo3x),
+)
+
+val smartList = listOf(Server("Spain", "Rome", "124ms", R.drawable.spainlogo3x))
+
+val recentList = listOf(
+    Server("Pakistan", "Multan", "95ms", R.drawable.pklogo3x),
+    Server("Pakistan", "Islamabad", "85ms", R.drawable.pklogo3x)
+)
+
+val recommendedList = listOf(
+    Server("Spain", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("Spain", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("Spain", "Milan", "85ms", R.drawable.spainlogo3x)
+)
+
+val streamingList = listOf(
+    Server("Streaming Spain", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("Streaming Spain", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("Streaming Spain", "Milan", "85ms", R.drawable.spainlogo3x)
+)
+
+val dvpnList = listOf(
+    Server("UK VIA USA", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("USA VIA CANADA", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("CANADA VIA UK", "Milan", "85ms", R.drawable.spainlogo3x)
+)
+
+val p2pList = listOf(
+    Server("P2P UK", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("P2P USA", "Milan", "85ms", R.drawable.spainlogo3x),
+    Server("P2P CANADA", "Milan", "85ms", R.drawable.spainlogo3x)
+)
+
+val countryList = listOf(
+    Server("Spain", "Venice", "101ms", R.drawable.spainlogo3x),
+    Server("Spain", "Italy", "102ms", R.drawable.spainlogo3x),
+    Server("Spain", "Rome", "103ms", R.drawable.spainlogo3x),
+    Server("Spain", "Venice", "104ms", R.drawable.spainlogo3x),
+    Server("Spain", "Italy", "105ms", R.drawable.spainlogo3x),
+    )
+
+val countryList2 = listOf(
+    Server("Spain", "Venice", "101ms", R.drawable.spainlogo3x)
+)
+
+val countryList3 = listOf(
+    Server("Spain", "Venice", "101ms", R.drawable.spainlogo3x)
+)
+
+val countryList4 = listOf(
+    Server("Pakistan", "Karachi", "107ms", R.drawable.pklogo3x),
+    Server("Pakistan", "Lahore", "108ms", R.drawable.pklogo3x)
+)
+
+val allLocationsList = listOf(
+    CountryServer("USA", R.drawable.spainlogo3x, countryList),
+    CountryServer("Argentina", R.drawable.spainlogo3x, countryList2),
+    CountryServer("Germany", R.drawable.spainlogo3x, countryList3),
+    CountryServer("Pakistan", R.drawable.pklogo3x, countryList4)
+
+)

app/src/main/java/com/vpn/fastestvpnservice/beans/SplitTunnelList.kt

@@ -0,0 +1,24 @@
+package com.vpn.fastestvpnservice.beans
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import com.vpn.fastestvpnservice.R
+
+data class SplitTunnelData(
+    val icon: Int,
+    val appName: String,
+    var isSelected: MutableState<Boolean>
+)
+
+val splitTunnelList = listOf(
+    SplitTunnelData(R.drawable.adaptive3x, "Adaptive Connectivity Services", mutableStateOf(false)),
+    SplitTunnelData(R.drawable.accessibility3x, "Android Accessibility Suite", mutableStateOf(false)),
+    SplitTunnelData(R.drawable.calculator3x, "Calculator", mutableStateOf(false))
+)
+
+val splitTunnelList2 = listOf(
+    SplitTunnelData(R.drawable.adaptive3x, "Adaptive Connectivity Services", mutableStateOf(false)),
+    SplitTunnelData(R.drawable.accessibility3x, "Android Accessibility Suite", mutableStateOf(false)),
+    SplitTunnelData(R.drawable.calculator3x, "Calculator", mutableStateOf(false))
+)
+

app/src/main/java/com/vpn/fastestvpnservice/beans/SubscriptionDataList.kt

@@ -0,0 +1,37 @@
+package com.vpn.fastestvpnservice.beans
+
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+
+data class SubscriptionDataList(
+    val title: String,
+    val desc: String
+)
+
+val subscriptionList = listOf(
+    SubscriptionDataList("Unlimited Data", "That Explains itself! No more bandwidth caps!"),
+    SubscriptionDataList("Ad-Blocker", "Repel Ads with one click!"),
+    SubscriptionDataList("10 Gbps Faster Connection","Servers are now faster than ever!"),
+    SubscriptionDataList("Link unto 10 Devices","Protect multiple devices with one subscription!")
+)
+
+data class SubscriptionPackageList(
+    val packageDuration: String,
+    val planType: String,
+    val desc: String,
+    val price: String,
+    var isSelected: MutableState<Boolean>
+)
+
+val subscriptionPackageList = listOf(
+    SubscriptionPackageList(
+        "Yearly", "Auto-Renewable",
+        "Unlimited Access For Twelve Month", "Rs 6,900", mutableStateOf(true)
+    ),
+    SubscriptionPackageList(
+        "Pro Monthly", "Auto-Renewable",
+        "Unlimited Access For A Month", "Rs 550", mutableStateOf(false)),
+    SubscriptionPackageList(
+            "Lifetime", "Auto-Renewable",
+    "Unlimited Access For Lifetime", "Rs 12,000", mutableStateOf(false))
+)

app/src/main/java/com/vpn/fastestvpnservice/customItems/CountryItem.kt

@@ -0,0 +1,317 @@
+package com.vpn.fastestvpnservice.customItems
+
+import android.widget.Toast
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.CountryServer
+import com.vpn.fastestvpnservice.beans.Server
+import com.vpn.fastestvpnservice.beans.allLocationsList
+import com.vpn.fastestvpnservice.beans.favList
+
+@Composable
+fun CountryItem(server: CountryServer) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                color = MaterialTheme.colorScheme.background
+            )
+            .padding(bottom = 1.dp)
+
+    ) {
+        val context = LocalContext.current
+
+        var countrySize by rememberSaveable { mutableStateOf(server.server?.size) }
+        var isServerExpanded by rememberSaveable { mutableStateOf(true) }
+
+        if (countrySize != null) {
+            countrySize?.let { size ->
+                if (size > 1) {
+                    Column {
+                        /* Country Location's Row */
+                        Row(
+                            verticalAlignment = Alignment.Top,
+                            horizontalArrangement = Arrangement.Start,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(
+                                    start = 16.dp, end = 12.dp, top = 12.dp
+                                )
+                                .clickable(
+                                    indication = null,
+                                    interactionSource = remember { MutableInteractionSource() }
+                                ) {
+                                    Toast
+                                        .makeText(
+                                            context,
+                                            server.country,
+                                            Toast.LENGTH_SHORT
+                                        )
+                                        .show()
+                                }
+                        ) {
+                            Icon(
+                                painter = painterResource(id = server.icon),
+                                contentDescription = "Server Logo",
+                                tint = Color.Unspecified,
+                                modifier = Modifier
+                                    .padding(bottom = 16.dp)
+                                    .size(24.dp)
+                            )
+                            Text(text = server.country,
+                                style = TextStyle(
+                                    fontSize = 16.sp,
+                                    color = MaterialTheme.colorScheme.primary
+                                ),
+                                modifier = Modifier
+                                    .padding(start = 16.dp, bottom = 18.dp)
+                                    .align(Alignment.CenterVertically)
+                            )
+                            Spacer(modifier = Modifier.weight(1F))
+                            Text(text = "$countrySize locations",
+                                style = TextStyle(
+                                    fontSize = 16.sp,
+                                    color = colorResource(id = R.color.blue_text)
+                                ),
+                                modifier = Modifier
+                                    .padding(end = 30.dp, bottom = 18.dp)
+                                    .align(Alignment.CenterVertically)
+                            )
+//            Spacer(modifier = Modifier.weight(1F))
+
+                            Icon(
+                                modifier = Modifier
+                                    .padding(bottom = 18.dp, end = 0.dp)
+                                    .size(12.dp, 7.dp)
+                                    .align(Alignment.CenterVertically)
+                                    .clickable(
+                                        indication = null,
+                                        interactionSource = remember { MutableInteractionSource() }
+                                    ) { isServerExpanded = !isServerExpanded },
+
+                                painter = if (isServerExpanded) painterResource(
+                                    id = R.drawable.dragarrow3x) else painterResource(
+                                    id = R.drawable.downarrow3x),
+
+                                contentDescription = "Server Logo",
+                                tint = MaterialTheme.colorScheme.primary,
+                            )
+                        }
+
+                        /* Country Expandable's Row */
+                        if (isServerExpanded) {
+                            ExpandableRow(server = server)
+                        }
+                    }
+                }
+                else {
+                    /* Country Location's Row -> 1 Location() */
+                    Row(
+                        verticalAlignment = Alignment.Top,
+                        horizontalArrangement = Arrangement.Start,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            ) {
+                                Toast
+                                    .makeText(
+                                        context,
+                                        server.country,
+                                        Toast.LENGTH_SHORT
+                                    )
+                                    .show()
+                            }
+                    ) {
+                        Icon(
+                            painter = painterResource(id = server.icon),
+                            contentDescription = "Server Logo",
+                            tint = Color.Unspecified,
+                            modifier = Modifier
+                                .padding(bottom = 16.dp)
+                                .size(24.dp)
+                        )
+                        Text(text = server.country,
+                            style = TextStyle(
+                                fontSize = 16.sp,
+                                color = MaterialTheme.colorScheme.primary
+                            ),
+                            modifier = Modifier
+                                .padding(start = 16.dp, bottom = 18.dp)
+                                .align(Alignment.CenterVertically)
+                        )
+                        Spacer(modifier = Modifier.weight(1F))
+
+                        var isFavorite by rememberSaveable { mutableStateOf(false) }
+
+                        Icon(
+                            modifier = Modifier
+                                .padding(bottom = 18.dp, end = 8.dp)
+                                .size(21.dp, 20.dp)
+                                .align(Alignment.CenterVertically)
+                                .clickable(
+                                    indication = null,
+                                    interactionSource = remember { MutableInteractionSource() }
+                                ) { isFavorite = !isFavorite },
+
+                            painter = if (isFavorite) painterResource(
+                                id = R.drawable.fav_server3x) else painterResource(
+                                id = R.drawable.unfav_server3x),
+
+                            contentDescription = "Server Logo",
+                            tint = Color.Unspecified,
+                        )
+                    }
+                }
+            }
+
+            Surface(
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .height(1.dp)
+                    .fillMaxWidth()
+                    .alpha(0.6F)
+                    .align(Alignment.BottomCenter)
+                ,
+                color = colorResource(id = R.color.gray_icon)
+            ) {}
+        }
+
+    }
+}
+
+@Composable
+fun ColumnScope.ExpandableRow(server: CountryServer) {
+    val context = LocalContext.current
+
+    Column(
+        modifier = Modifier
+            .padding(
+                start = 40.dp, end = 26.dp,
+                top = 2.dp, bottom = 28.dp
+            )
+            .background(Color.Transparent)
+    ) {
+            server.server?.let { serverData ->
+                serverData.forEachIndexed { index, serverInfo ->
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Start,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(
+                                vertical = 15.dp
+                            )
+                            .background(Color.Transparent)
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            ) {
+                                Toast
+                                    .makeText(
+                                        context,
+                                        serverInfo.serverName,
+                                        Toast.LENGTH_SHORT
+                                    )
+                                    .show()
+                            }
+                    ) {
+                        Text(text = serverInfo.serverName,
+                            style = TextStyle(
+                                fontSize = 16.sp,
+                                color = MaterialTheme.colorScheme.primary
+                            ),
+                            modifier = Modifier
+                                .padding(start = 16.dp, bottom = 0.dp)
+                                .align(Alignment.CenterVertically)
+                        )
+                        Spacer(modifier = Modifier.weight(1F))
+
+                        Text(text = serverInfo.ping,
+                            style = TextStyle(
+                                fontSize = 16.sp,
+                                color = colorResource(id = R.color.blue_text)
+                            ),
+                            modifier = Modifier
+                                .padding(start = 0.dp, end = 30.dp)
+                                .align(Alignment.CenterVertically)
+                        )
+                        var isFavorite by rememberSaveable { mutableStateOf(false) }
+
+                        Icon(
+                            modifier = Modifier
+                                .padding(bottom = 0.dp, end = 16.dp)
+                                .size(21.dp, 20.dp)
+                                .align(Alignment.CenterVertically)
+                                .clickable(
+                                    indication = null,
+                                    interactionSource = remember { MutableInteractionSource() }
+                                ) { isFavorite = !isFavorite },
+
+                            painter = if (isFavorite) painterResource(
+                                id = R.drawable.fav_server3x) else painterResource(
+                                id = R.drawable.unfav_server3x),
+
+                            contentDescription = "Server Logo",
+                            tint = Color.Unspecified,
+                        )
+                    }
+
+                    Surface(
+                        modifier = Modifier
+                            .padding(top = 0.dp, end = 0.dp)
+                            .height(1.dp)
+                            .fillMaxWidth()
+                            .alpha(0.6F)
+                        ,
+                        color = colorResource(id = R.color.gray_icon)
+                    ) {}
+                }
+            }
+    }
+}
+
+@Preview
+@Composable
+fun CountryItemPreview() {
+    CountryItem(server = allLocationsList[0])
+}

app/src/main/java/com/vpn/fastestvpnservice/customItems/ServerItem.kt

@@ -0,0 +1,383 @@
+package com.vpn.fastestvpnservice.customItems
+
+import android.content.res.Configuration
+import android.widget.Toast
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.Server
+import com.vpn.fastestvpnservice.beans.favList
+import com.vpn.fastestvpnservice.beans.favServersList
+
+@Composable
+fun ServerItem(server: Server) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = MaterialTheme.colorScheme.background)
+            .padding(bottom = 1.dp)
+    ) {
+        val context = LocalContext.current
+
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ) {
+                    Toast
+                        .makeText(
+                            context,
+                            server.serverName,
+                            Toast.LENGTH_SHORT
+                        )
+                        .show()
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = server.icon),
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .padding(bottom = 16.dp)
+                    .size(24.dp)
+            )
+            Text(text = server.country,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.primary
+                ),
+                modifier = Modifier
+                    .padding(start = 16.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+                )
+            Spacer(modifier = Modifier.weight(1F))
+            Text(text = server.ping,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = colorResource(id = R.color.blue_text)
+                ),
+                modifier = Modifier
+                    .padding(end = 30.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+            )
+//            Spacer(modifier = Modifier.weight(1F))
+            var isFavorite by rememberSaveable { mutableStateOf(false) }
+
+            Icon(
+                modifier = Modifier
+                    .padding(bottom = 18.dp, end = 8.dp)
+                    .size(22.dp, 21.dp)
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() }
+                    ) { isFavorite = !isFavorite },
+
+                painter = if (isFavorite) painterResource(
+                    id = R.drawable.fav_server3x) else painterResource(
+                    id = R.drawable.unfav_server3x),
+
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+            )
+
+//            IconButton(
+//                onClick = { isFavorite = !isFavorite },
+//                modifier = Modifier
+//                    .clickable(
+//                        indication = null,
+//                        interactionSource = remember { MutableInteractionSource() },
+//                        ) {
+//                        isFavorite = !isFavorite
+//                    }
+//            ) {
+//
+//
+//            }
+
+        }
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp, end = 0.dp)
+                .height(1.dp)
+                .fillMaxWidth()
+                .alpha(0.6F)
+                .align(Alignment.BottomCenter)
+               ,
+            color = colorResource(id = R.color.gray_icon)
+        ) {}
+    }
+}
+
+@Composable
+fun FavoriteServerItem(server: Server) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.colorScheme.background)
+            .padding(bottom = 1.dp)
+    ) {
+        val context = LocalContext.current
+
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ) {
+                    Toast
+                        .makeText(
+                            context,
+                            server.serverName,
+                            Toast.LENGTH_SHORT
+                        )
+                        .show()
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = server.icon),
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .padding(bottom = 16.dp)
+                    .size(24.dp)
+            )
+            Text(text = server.country,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.primary
+                ),
+                modifier = Modifier
+                    .padding(start = 16.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+            )
+            Spacer(modifier = Modifier.weight(1F))
+//            Text(text = server.ping,
+//                style = TextStyle(
+//                    fontSize = 16.sp,
+//                    color = colorResource(id = R.color.blue_text)
+//                ),
+//                modifier = Modifier
+//                    .padding(end = 30.dp, bottom = 18.dp)
+//                    .align(Alignment.CenterVertically)
+//            )
+//            Spacer(modifier = Modifier.weight(1F))
+            var isFavorite by rememberSaveable {
+                mutableStateOf(true) }
+
+            Icon(
+                modifier = Modifier
+                    .padding(bottom = 18.dp, end = 0.dp)
+                    .size(22.dp, 21.dp)
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() }
+                    ) { isFavorite = !isFavorite },
+
+                painter = if (isFavorite) painterResource(
+                    id = R.drawable.fav_server3x) else painterResource(
+                    id = R.drawable.unfav_server3x),
+
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+            )
+
+//            IconButton(
+//                onClick = { isFavorite = !isFavorite },
+//                modifier = Modifier
+//                    .clickable(
+//                        indication = null,
+//                        interactionSource = remember { MutableInteractionSource() },
+//                        ) {
+//                        isFavorite = !isFavorite
+//                    }
+//            ) {
+//
+//
+//            }
+
+        }
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp, end = 0.dp)
+                .height(1.dp)
+                .fillMaxWidth()
+                .alpha(0.6F)
+                .align(Alignment.BottomCenter)
+            ,
+            color = colorResource(id = R.color.gray_icon)
+        ) {}
+    }
+}
+
+@Composable
+fun ServerSearchItem(server: Server) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = MaterialTheme.colorScheme.background)
+            .padding(bottom = 1.dp)
+
+    ) {
+        val context = LocalContext.current
+
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ) {
+                    Toast
+                        .makeText(
+                            context,
+                            server.serverName,
+                            Toast.LENGTH_SHORT
+                        )
+                        .show()
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = server.icon),
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .padding(bottom = 16.dp)
+                    .size(24.dp)
+            )
+            Text(text = server.country,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.primary
+                ),
+                modifier = Modifier
+                    .padding(start = 16.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+            )
+            Spacer(modifier = Modifier.weight(1F))
+            Text(text = server.ping,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    color = colorResource(id = R.color.blue_text)
+                ),
+                modifier = Modifier
+                    .padding(end = 30.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+            )
+//            Spacer(modifier = Modifier.weight(1F))
+            var isFavorite by rememberSaveable { mutableStateOf(false) }
+
+            Icon(
+                modifier = Modifier
+                    .padding(bottom = 18.dp, end = 8.dp)
+                    .size(22.dp, 21.dp)
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() }
+                    ) { isFavorite = !isFavorite },
+
+                painter = if (isFavorite) painterResource(
+                    id = R.drawable.fav_server3x) else painterResource(
+                    id = R.drawable.unfav_server3x),
+
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+            )
+
+//            IconButton(
+//                onClick = { isFavorite = !isFavorite },
+//                modifier = Modifier
+//                    .clickable(
+//                        indication = null,
+//                        interactionSource = remember { MutableInteractionSource() },
+//                        ) {
+//                        isFavorite = !isFavorite
+//                    }
+//            ) {
+//
+//
+//            }
+
+        }
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp, end = 0.dp)
+                .height(1.dp)
+                .fillMaxWidth()
+                .alpha(0.6F)
+                .align(Alignment.BottomCenter)
+            ,
+            color = colorResource(id = R.color.gray_icon)
+        ) {}
+    }
+}
+
+@Preview
+@Composable
+fun ServerItemPreview() {
+    ServerItem(server = favList[0])
+}
+
+@Preview
+@Composable
+fun FavoriteServerItemPreview() {
+    FavoriteServerItem(server = favServersList[0])
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun FavoriteServerItemPreviewDark() {
+    FavoriteServerItem(server = favServersList[0])
+}
+
+@Preview
+@Composable
+fun ServerSearchItemPreview() {
+    ServerSearchItem(server = favList[0])
+}

app/src/main/java/com/vpn/fastestvpnservice/customItems/SplitTunnelingItem.kt

@@ -0,0 +1,123 @@
+package com.vpn.fastestvpnservice.customItems
+
+import android.widget.Toast
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Checkbox
+import androidx.compose.material.CheckboxDefaults
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.SplitTunnelData
+import com.vpn.fastestvpnservice.beans.splitTunnelList
+
+@Composable
+fun SplitTunnelingItem(app: SplitTunnelData) {
+    Surface(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                color = MaterialTheme.colorScheme.background
+            )
+            .padding(bottom = 1.dp),
+        color = if (app.isSelected.value) colorResource(id = R.color.split_background)
+                else MaterialTheme.colorScheme.background
+
+    ) {
+        val context = LocalContext.current
+
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember {
+                        MutableInteractionSource()
+                    },
+                ) {
+                    app.isSelected.value = !app.isSelected.value
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = app.icon),
+                contentDescription = "Server Logo",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .padding(bottom = 16.dp)
+                    .size(40.dp)
+            )
+            Text(text = app.appName,
+                style = TextStyle(
+                    fontSize = 14.sp,
+                    color = if (app.isSelected.value) colorResource(id = R.color.dark_blue_gray_text)
+                            else MaterialTheme.colorScheme.primary
+                ),
+                modifier = Modifier
+                    .padding(start = 12.dp, bottom = 18.dp)
+                    .align(Alignment.CenterVertically)
+            )
+            Spacer(modifier = Modifier.weight(1F))
+
+            var isSelected by rememberSaveable { mutableStateOf(false) }
+
+            Checkbox(
+                checked = app.isSelected.value,
+                onCheckedChange = {
+                    app.isSelected.value = it
+                },
+                colors = CheckboxDefaults.colors(
+                    uncheckedColor = colorResource(id = R.color.switch_gray),
+                    checkedColor = colorResource(id = R.color.blue_text),
+                ),
+
+                modifier = Modifier
+                    .padding(bottom = 18.dp, end = 8.dp)
+                    .align(Alignment.CenterVertically)
+                    .background(
+                        color = if (app.isSelected.value) colorResource(id = R.color.blue_text)
+                        else colorResource(id = R.color.switch_gray),
+                        shape = RoundedCornerShape(5.dp)
+                    )
+                    .size(24.dp)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun SplitTunnelingItemPreview() {
+    SplitTunnelingItem(splitTunnelList[0])
+}

app/src/main/java/com/vpn/fastestvpnservice/customItems/SubscriptionDataItem.kt

@@ -0,0 +1,128 @@
+package com.vpn.fastestvpnservice.customItems
+
+import android.content.res.Configuration
+import android.widget.Toast
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.Server
+import com.vpn.fastestvpnservice.beans.SubscriptionDataList
+import com.vpn.fastestvpnservice.beans.favServersList
+import com.vpn.fastestvpnservice.beans.subscriptionList
+
+@Composable
+fun SubscriptionDataItem(item: SubscriptionDataList) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.colorScheme.background)
+            .padding(bottom = 1.dp)
+    ) {
+        val context = LocalContext.current
+
+        Row(
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 0.dp, end = 7.dp, top = 12.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember {
+                        MutableInteractionSource()
+                    }
+                ) {
+                    Toast
+                        .makeText(
+                            context,
+                            item.title,
+                            Toast.LENGTH_SHORT
+                        )
+                        .show()
+                }
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.yellowcheck3x),
+                contentDescription = "Server Logo",
+                tint = colorResource(id = R.color.yellow_text),
+                modifier = Modifier
+                    .padding(bottom = 16.dp, top = 3.dp)
+                    .size(19.dp, 14.dp)
+            )
+            Column(
+                modifier = Modifier
+                    .padding(start = 16.dp)
+            ) {
+                Text(text = item.title,
+                    style = TextStyle(
+                        fontSize = 16.sp,
+                        fontWeight = FontWeight.Medium,
+                        color = MaterialTheme.colorScheme.primary
+                    ),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier
+                        .padding(start = 0.dp, bottom = 0.dp)
+                )
+                Text(text = item.desc,
+                    style = TextStyle(
+                        fontSize = 14.sp,
+                        color = MaterialTheme.colorScheme.primary
+                    ),
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier
+                        .padding(top = 6.dp, bottom = 10.dp)
+                        .alpha(0.8F)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun SubscriptionDataItemPreview() {
+    SubscriptionDataItem(subscriptionList[0])
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun SubscriptionDataItemPreviewDark() {
+    SubscriptionDataItem(subscriptionList[0])
+}

app/src/main/java/com/vpn/fastestvpnservice/customItems/SubscriptionPackageItem.kt

@@ -0,0 +1,202 @@
+package com.vpn.fastestvpnservice.customItems
+
+import android.content.res.Configuration
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.SubscriptionPackageList
+import com.vpn.fastestvpnservice.beans.subscriptionPackageList
+import java.util.Random
+
+var getPosition: Int = 0
+
+@Composable
+fun SubscriptionPackageItem(item: SubscriptionPackageList, position: Int) {
+
+    val context = LocalContext.current
+    var selectedPosition by remember { mutableIntStateOf(0) }
+    var items by remember { mutableStateOf(item) }
+    var isSelected by remember { mutableStateOf(true) }
+    val random = kotlin.random.Random.nextInt(1, 999)
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 16.dp)
+            .padding(bottom = 0.dp)
+            .height(112.dp)
+            .border(
+                border = BorderStroke(
+                    2.dp,
+                    if (item.isSelected.value) colorResource(id = R.color.blue_text)
+                    else Color.White
+                ),
+                shape = RoundedCornerShape(24.dp)
+            )
+            .background(
+                shape = RoundedCornerShape(24.dp),
+                color = Color.White
+            )
+            .pointerInput(Unit) {
+                detectTapGestures {
+
+//                    if (selectedPosition == position)
+//                    {
+//                        Log.d("test_plan", "True : selectedPosition = $selectedPosition position = $position" )
+//                    }
+//                    else {
+//                        Log.d("test_plan", "False : selectedPosition = $selectedPosition position = $position" )
+//                        selectedPosition = position
+//                        Log.d("test_plan", "Update  selectedPosition: $selectedPosition" )
+//                        subscriptionPackageList.forEachIndexed { index, subscriptionPackageList ->
+//                            if (selectedPosition == index) {
+//                                Log.d("test_plan", "True Inside : selectedPosition = $selectedPosition index = $index" )
+//                                subscriptionPackageList.isSelected.value = true
+//                            }
+//                            else {
+//                                Log.d("test_plan", "False Inside : selectedPosition = $selectedPosition index = $index" )
+//                                subscriptionPackageList.isSelected.value = false
+//                            }
+//                        }
+//                    }
+
+                    if (!item.isSelected.value) {
+//                        Log.d("test_plan", "False : selectedPosition = $selectedPosition position = $position" )
+                        selectedPosition = position
+                        subscriptionPackageList.forEachIndexed { index, subscriptionPackageList ->
+//                            if (selectedPosition == index) {
+//                                Log.d("test_plan", "True Inside : selectedPosition = $selectedPosition index = $index" )
+//                                subscriptionPackageList.isSelected.value = true
+//                            }
+//                            else {
+//                                Log.d("test_plan", "False Inside : selectedPosition = $selectedPosition index = $index" )
+//                                subscriptionPackageList.isSelected.value = false
+//                            }
+//                            Log.d("test_plan", "Update ${subscriptionPackageList.packageDuration} $index $position" )
+
+                            subscriptionPackageList.isSelected.value = index == position
+                            getPosition = position
+//                            Log.d("test_plan", "Update ${subscriptionPackageList.packageDuration} ${subscriptionPackageList.isSelected.value}" )
+
+                        }
+                    }
+
+
+                }
+            },
+    )
+    {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(20.dp)
+                .background(Color.White)
+        ) {
+            Row(
+                verticalAlignment = Alignment.Top,
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier
+                    .fillMaxWidth()
+            ) {
+                Text(text = item.packageDuration,
+                    style = TextStyle(
+                        color = if (item.isSelected.value) colorResource(
+                            id = R.color.blue_text) else colorResource(
+                            id = R.color.dark_blue_gray_text),
+                        fontSize = 18.sp,
+                        fontStyle = FontStyle.Normal,
+                        fontWeight = FontWeight.Medium
+                    ),
+                    maxLines = 1,
+                    modifier = Modifier
+                        .padding(start = 0.dp, end = 0.dp)
+                        .alpha(if (item.isSelected.value) 1F else 0.6F)
+                )
+                Text(text = item.price,
+                    style = TextStyle(
+                        color = if (item.isSelected.value) colorResource(
+                            id = R.color.light_blue_2) else colorResource(
+                            id = R.color.text_color_dark_gray),
+                        fontSize = 20.sp,
+                        fontStyle = FontStyle.Normal,
+                        fontWeight = FontWeight.SemiBold,
+                        textAlign = TextAlign.Right
+                    ),
+                    maxLines = 1,
+                    modifier = Modifier
+                        .padding(start = 0.dp, end = 0.dp)
+                        .alpha(if (item.isSelected.value) 1F else 0.6F)
+                )
+            }
+            Text(text = item.planType,
+                style = TextStyle(
+                    color = colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 14.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium,
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(top = 6.dp, end = 0.dp)
+            )
+            Text(text = item.desc,
+                style = TextStyle(
+                    color = colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 14.sp,
+                    fontStyle = FontStyle.Normal,
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(top = 8.dp, end = 0.dp),
+                lineHeight = 30.sp
+            )
+        }
+    }
+}
+
+fun getSelectedPosition(): Int {
+    return getPosition
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun SubscriptionPackageItemPreview() {
+    SubscriptionPackageItem(subscriptionPackageList[1], 0)
+}

app/src/main/java/com/vpn/fastestvpnservice/navigation/BottomBarNavGraph.kt

@@ -0,0 +1,82 @@
+package com.vpn.fastestvpnservice.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import com.vpn.fastestvpnservice.screens.Login
+import com.vpn.fastestvpnservice.screens.ServerList
+import com.vpn.fastestvpnservice.screens.accountScreensAll.ChangePassword
+import com.vpn.fastestvpnservice.screens.accountScreensAll.FavoriteServers
+import com.vpn.fastestvpnservice.screens.accountScreensAll.SubscriptionScreen
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.Account
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.Help
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.Home
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.Settings
+import com.vpn.fastestvpnservice.screens.helpScreensAll.About
+import com.vpn.fastestvpnservice.screens.helpScreensAll.CustomerSupport
+import com.vpn.fastestvpnservice.screens.helpScreensAll.FAQ
+import com.vpn.fastestvpnservice.screens.helpScreensAll.PrivacyPolicy
+import com.vpn.fastestvpnservice.screens.helpScreensAll.TermsAndConditions
+import com.vpn.fastestvpnservice.screens.settingsScreenAll.Notifications
+import com.vpn.fastestvpnservice.screens.settingsScreenAll.SplitTunneling
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@Composable
+fun BottomBarNavGraph(navHostController: NavHostController) {
+    NavHost(navController = navHostController,
+        startDestination = BottomBarScreen.Home.route) {
+
+        composable(route = BottomBarScreen.Home.route) {
+            Home(navHostController = navHostController)
+        }
+        composable(route = BottomBarScreen.Settings.route) {
+            Settings(navHostController = navHostController)
+        }
+        composable(route = BottomBarScreen.Help.route) {
+            Help(navHostController = navHostController)
+        }
+        composable(route = BottomBarScreen.Account.route) {
+            Account(navHostController = navHostController)
+        }
+        composable(route = Screen.FAQ.route) {
+            FAQ(navHostController = navHostController)
+        }
+        composable(route = Screen.PrivacyPolicy.route) {
+            PrivacyPolicy(navHostController = navHostController)
+        }
+        composable(route = Screen.TermsAndConditions.route) {
+            TermsAndConditions(navHostController = navHostController)
+        }
+        composable(route = Screen.About.route) {
+            About(navHostController = navHostController)
+        }
+        composable(route = Screen.ChangePassword.route) {
+            ChangePassword(navHostController = navHostController)
+        }
+        composable(route = Screen.ServerList.route) {
+            ServerList(navHostController = navHostController, false)
+        }
+        composable(route = Screen.Notifications.route) {
+            Notifications(navHostController = navHostController)
+        }
+        composable(route = Screen.SplitTunneling.route) {
+            SplitTunneling(navHostController = navHostController)
+        }
+        composable(route = Screen.FavoriteServers.route) {
+            FavoriteServers(navHostController = navHostController)
+        }
+        composable(route = Screen.Subscription.route) {
+            SubscriptionScreen(navHostController = navHostController)
+        }
+        composable(route = Screen.CustomerSupport.route) {
+            CustomerSupport(navHostController = navHostController)
+        }
+
+        /* Again declare for login because of different -> navHostController */
+//        composable(route = Screen.Login.route) {
+//            Login(navHostController = navHostController)
+//        }
+    }
+}

app/src/main/java/com/vpn/fastestvpnservice/navigation/NavGraph.kt

@@ -0,0 +1,40 @@
+package com.vpn.fastestvpnservice.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import com.vpn.fastestvpnservice.screens.BottomBarMainScreen
+import com.vpn.fastestvpnservice.screens.ForgotPassword
+import com.vpn.fastestvpnservice.screens.Login
+import com.vpn.fastestvpnservice.screens.SignUp
+import com.vpn.fastestvpnservice.screens.Splash
+import com.vpn.fastestvpnservice.screens.Started
+import com.vpn.fastestvpnservice.screens.helpScreensAll.FAQ
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@Composable
+fun SetUpNavGraph(navHostController: NavHostController) {
+    NavHost(navController = navHostController,
+        startDestination = Screen.Splash.route,
+        ) {
+        composable(route = Screen.Splash.route) {
+            Splash(navHostController)
+        }
+        composable(route = Screen.Login.route) {
+            Login(navHostController)
+        }
+        composable(route = Screen.SignUp.route) {
+            SignUp(navHostController)
+        }
+        composable(route = Screen.ForgotPassword.route) {
+            ForgotPassword(navHostController = navHostController)
+        }
+        composable(route = Screen.Started.route) {
+            Started(navHostController = navHostController)
+        }
+        composable(route = Screen.BottomBarMainScreen.route) {
+            BottomBarMainScreen()
+        }
+    }
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/BottomBarMainScreen.kt

@@ -0,0 +1,175 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.util.Log
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.LocalContentColor
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavDestination
+import androidx.navigation.NavDestination.Companion.hierarchy
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.navigation.BottomBarNavGraph
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+
+@Composable
+fun BottomBarMainScreen() {
+    val navController = rememberNavController()
+
+    Scaffold (
+        bottomBar = {
+            BottomBar(navController)
+        },
+        content = { padding ->
+            Box(modifier = Modifier.padding(padding)) {
+                BottomBarNavGraph(navHostController = navController)
+            }
+        }
+    )
+}
+
+@Composable
+fun BottomBar(navHostController: NavHostController) {
+    val screens = listOf(
+        BottomBarScreen.Home,
+        BottomBarScreen.Settings,
+        BottomBarScreen.Help,
+        BottomBarScreen.Account
+    )
+
+    val navBackStackEntry = navHostController.currentBackStackEntryAsState()
+    val currentDestination = navBackStackEntry.value?.destination
+
+    Log.d("currentRoute -> BB ", currentDestination.toString())
+
+
+    BottomNavigation (
+        backgroundColor = MaterialTheme.colorScheme.onPrimary,
+        contentColor = Color.Gray,
+        modifier = Modifier.height(84.dp)
+    ) {
+        screens.forEach { screen ->
+            AddItem(
+                screen = screen,
+                currentDestination = currentDestination,
+                navHostController = navHostController
+            )
+        }
+    }
+}
+
+@Composable
+fun RowScope.AddItem(
+    screen: BottomBarScreen,
+    currentDestination: NavDestination?,
+    navHostController: NavHostController
+) {
+    val route = currentRoute(navController = navHostController)
+    Log.d("currentRoute -> ", route.toString())
+    BottomNavigationItem(
+        label = {
+            if (currentDestination?.route == screen.route) {
+                Text(text = screen.title,
+                    color = colorResource(id = R.color.blue_text),
+                    )
+            }
+            else {
+                Text(text = screen.title,
+                    color = Color.Gray)
+            }
+
+        },
+        alwaysShowLabel = true,
+        selected = currentDestination?.hierarchy?.any{
+            it.route == screen.route
+        } == true,
+        onClick = {
+
+            /* First time currentDestination is different when on BottomBar Item */
+
+            if (currentDestination?.route != screen.route) {
+                Log.d("test_bottom_navbar",
+                    "currentDestination -> " + currentDestination?.route
+                            + "Screen Clicked -> " + screen.route
+                )
+
+                navHostController.navigate(screen.route) {
+                    popUpTo(
+                        navHostController.graph
+                            .findStartDestination().id) {
+                        saveState = true
+                    }
+                    launchSingleTop = true
+                }
+            }
+        },
+        icon = {
+            if (currentDestination?.route == screen.route) {
+                Icon(
+                    painter = painterResource(id = screen.icon),
+                    contentDescription = "Navigation Icon",
+                    tint = colorResource(id = R.color.dark_blue_icon),
+                    modifier = Modifier
+                        .size(45.dp, 39.dp)
+                        .padding(top = 9.dp, bottom = 7.dp)
+
+                )
+            }
+            else {
+                Icon(
+                    painter = painterResource(id = screen.icon),
+                    contentDescription = "Navigation Icon",
+                    tint = colorResource(id = R.color.gray_icon),
+                    modifier = Modifier
+                        .size(45.dp, 39.dp)
+                        .padding(top = 9.dp, bottom = 7.dp)                )
+            }
+
+        },
+        unselectedContentColor = LocalContentColor.current.copy(
+            alpha = ContentAlpha.disabled
+        )
+    )
+}
+
+@Composable
+fun currentRoute(navController: NavHostController): String? {
+    val navBackStackEntry = navController.currentBackStackEntryAsState()
+    return navBackStackEntry.value?.arguments?.getString("KEY_ROUTE")
+}
+
+@Composable
+@Preview
+fun BottomNavBarPreview() {
+    BottomBarMainScreen()
+}
+
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+fun BottomNavBarPreviewDark() {
+    BottomBarMainScreen()
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/ForgotPassword.kt

@@ -0,0 +1,278 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun ForgotPassword(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    Box(
+        modifier = Modifier
+            .paint(
+                painter = painterResource(id = R.drawable.bg_img3),
+                contentScale = ContentScale.FillBounds)
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+            .fillMaxSize()
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    focusManager.clearFocus()
+                    keyboardController?.hide()
+                }
+            }
+        ,
+//        contentAlignment = Alignment.Center
+
+    ) {
+        Column (
+            modifier = Modifier
+                .fillMaxHeight()
+                .fillMaxWidth()
+            ,
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+
+            Spacer(modifier = Modifier.height(50.dp))
+
+            IconButton(
+                onClick = {
+                    navHostController.popBackStack()
+                },
+                modifier = Modifier
+                    .padding(start = 16.dp, top = 52.dp)
+                    .align(Alignment.Start)
+                )
+            {
+                Icon(painter = painterResource(
+                    id = R.drawable.back_arrow3x),
+                    contentDescription = "Back Button",
+                    tint = colorResource(id = R.color.white),
+                    modifier = Modifier
+                        .height(36.dp)
+                        .width(36.dp)
+                        .align(Alignment.Start),
+                )
+            }
+            Spacer(modifier = Modifier.height(45.dp))
+            Image(
+                painter = painterResource(id = R.drawable.fastestapp_logo3x),
+                contentDescription = "FastestVPN",
+                modifier = Modifier
+                    .size(102.dp, 75.dp)
+                    .background(Color.Transparent)
+                    .padding(top = 0.dp)
+                ,
+            )
+            Spacer(modifier = Modifier.height(50.dp))
+            Text(
+                modifier = Modifier
+                    .padding(start = 16.dp)
+                    .align(Alignment.Start)
+                ,
+                fontSize = 28.sp,
+                fontWeight = FontWeight.Medium,
+                text = "Forgot Password!",
+                color = Color.White,
+            )
+            Text(
+                modifier = Modifier
+                    .padding(start = 16.dp)
+                    .align(Alignment.Start),
+                fontSize = 14.sp,
+                fontWeight = FontWeight.Normal,
+                text = "Enter the email address associated with your account.",
+                color = colorResource(id = R.color.light_grey),
+                maxLines = 2,
+            )
+            Spacer(modifier = Modifier.height(20.dp))
+
+            var textChanged by remember { mutableStateOf("") }
+
+
+            TextField(
+                value = textChanged,
+                onValueChange = {
+                    textChanged = it
+                },
+
+                textStyle = TextStyle(
+                    fontSize = 14.sp,
+                    color = colorResource(id = R.color.white),
+
+                    ),
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 15.dp)
+                    .align(Alignment.Start)
+                    .fillMaxWidth()
+                    .height(60.dp)
+                    .border(
+                        1.dp,
+                        color = colorResource(id = R.color.white),
+                        shape = RoundedCornerShape(16.dp)
+                    ),
+
+//                placeholder = {
+//                    Text(text = "Enter email address",
+//                        color = colorResource(id = R.color.white),
+//                        fontSize = 14.sp
+//                    )
+//                },
+                label = {
+                    Text(text = "Email",
+                        style = TextStyle(
+                            colorResource(id = R.color.white),
+                            fontSize = 12.sp
+                        )
+                    )
+                },
+                leadingIcon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.sms3x),
+                        contentDescription = "Email Logo",
+                        tint = colorResource(id = R.color.white),
+                        modifier = Modifier
+                            .size(24.dp, 24.dp)
+                    )
+                },
+                maxLines = 1,
+                colors = TextFieldDefaults.colors(
+                    focusedLabelColor = Color.Blue,
+                    unfocusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedIndicatorColor = colorResource(id = R.color.transparent),
+                    disabledIndicatorColor = colorResource(id = R.color.transparent),
+                    unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                    cursorColor = colorResource(id = R.color.white)
+                ),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Email,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
+
+                )
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            Button(
+                onClick = {
+                    Log.d("test_button", "onClick Send Code")
+                },
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 16.dp, bottom = 100.dp)
+                    .background(colorResource(id = R.color.transparent))
+                    .fillMaxWidth()
+                    .height(60.dp),
+                shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+                colors = ButtonDefaults.buttonColors(
+                    contentColor = colorResource(id = R.color.light_blue),
+                    containerColor = colorResource(id = R.color.white),
+                ),
+            )
+            {
+                Text(text = "Send Code",
+                    style = TextStyle(
+                        fontSize = 18.sp,
+                        fontFamily = FontFamily.Default,
+                        fontWeight = FontWeight.Medium,
+                        color = colorResource(id = R.color.blue_text)
+                    )
+                )
+                Log.d("test_button", "RowScope")
+            }
+        }
+
+
+
+    }
+}
+
+@Preview
+@Composable
+fun ForgotPasswordPreview() {
+    ForgotPassword(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun ForgotPasswordPreviewDark() {
+    ForgotPassword(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/LoginScreen.kt

@@ -0,0 +1,468 @@
+package com.vpn.fastestvpnservice.screens
+
+
+import android.content.res.Configuration
+import android.gesture.Gesture
+import android.util.Log
+import android.widget.Toast
+import androidx.activity.OnBackPressedCallback
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.text.KeyboardActionScope
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material.icons.outlined.Visibility
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonElevation
+import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldColors
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCompositionContext
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddText
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import kotlin.coroutines.coroutineContext
+import kotlin.random.Random
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun Login(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+    val random = Random.nextInt(1,999)
+
+//    Image(
+//        painter = painterResource(id = R.drawable.bg_img3),
+//        contentDescription = "FastestVPN Background",
+//        modifier = Modifier
+//            .fillMaxWidth()
+//            .fillMaxHeight(),
+//        contentScale = ContentScale.FillBounds
+//    )
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .paint(
+                painter = painterResource(id = R.drawable.bg_img3),
+                contentScale = ContentScale.FillBounds
+            )
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    focusManager.clearFocus()
+                    keyboardController?.hide()
+                }
+            },
+
+//        contentAlignment = Alignment.Center
+
+    ) {
+        Column (
+            modifier = Modifier
+                .fillMaxHeight()
+                .fillMaxWidth()
+            ,
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Spacer(modifier = Modifier.height(132.dp))
+            Image(
+                painter = painterResource(
+                    id = R.drawable.fastestapp_logo3x),
+                contentDescription = "FastestVPN",
+                modifier = Modifier
+                    .size(width = 75.dp, height = 102.dp)
+                    .background(Color.Transparent)
+                    .padding(top = 0.dp)
+                ,
+            )
+            Spacer(modifier = Modifier.height(50.dp))
+
+            TextMsg(
+                fontSize = 28.sp,
+                text = "Welcome Back!",
+                color = Color.White
+            )
+            TextMsg(
+                fontSize = 14.sp,
+                text = "Please login to your account.",
+                color = colorResource(id = R.color.light_grey)
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            var textChanged by remember { mutableStateOf("") }
+
+
+            TextField(
+                value = textChanged,
+                onValueChange = {
+                    textChanged = it
+                },
+
+                textStyle = TextStyle(
+                    fontSize = 20.sp,
+                    color = colorResource(id = R.color.white),
+
+                ),
+                modifier = Modifier
+                    .padding(start = 15.dp, end = 15.dp)
+                    .align(Alignment.Start)
+                    .fillMaxWidth()
+                    .height(60.dp)
+                    .border(
+                        1.dp,
+                        color = colorResource(id = R.color.white),
+                        shape = RoundedCornerShape(16.dp)
+                    ),
+
+//                placeholder = {
+//                    Text(text = "Enter email address",
+//                        color = colorResource(id = R.color.white))
+//                },
+                label = {
+                    Text(text = "Email",
+                        style = TextStyle(
+                            colorResource(id = R.color.white))
+                        )
+                },
+                leadingIcon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.sms3x),
+                        contentDescription = "Email Logo",
+                        tint = colorResource(id = R.color.white),
+                        modifier = Modifier
+                            .size(24.dp, 24.dp)
+                    )
+                },
+                maxLines = 1,
+                colors = TextFieldDefaults.colors(
+                    focusedLabelColor = Color.Blue,
+                    unfocusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedIndicatorColor = colorResource(id = R.color.transparent),
+                    disabledIndicatorColor = colorResource(id = R.color.transparent),
+                    unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                    cursorColor = colorResource(id = R.color.white)
+                ),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Email,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
+
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            var passwordChanged by remember { mutableStateOf("") }
+            var passwordVisible by remember { mutableStateOf(false) }
+
+            TextField(
+                value = passwordChanged,
+                onValueChange = {
+                    Log.d("onClick_test", "onValueChange -> ")
+                    passwordChanged = it
+                },
+
+                textStyle = TextStyle(
+                    fontSize = 20.sp,
+                    color = colorResource(id = R.color.white),
+
+                    ),
+                modifier = Modifier
+                    .padding(start = 15.dp, end = 15.dp)
+                    .align(Alignment.Start)
+                    .fillMaxWidth()
+                    .height(60.dp)
+                    .border(
+                        1.dp,
+                        color = colorResource(id = R.color.grey_password_field),
+                        shape = RoundedCornerShape(16.dp)
+                    )
+                    .background(color = colorResource(id = R.color.transparent)),
+
+                shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+                label = {
+                    Text(text = "Password",
+                        style = TextStyle(
+                            colorResource(id = R.color.white))
+                    )
+                },
+                leadingIcon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.lock3x),
+                        contentDescription = "Password Logo",
+                        tint = colorResource(id = R.color.white),
+                        modifier = Modifier
+                            .size(24.dp, 24.dp)
+                    )
+                },
+                maxLines = 1,
+                colors = TextFieldDefaults.colors(
+                    focusedLabelColor = Color.Blue,
+                    unfocusedContainerColor = colorResource(id = R.color.grey_password_field),
+                    focusedContainerColor = colorResource(id = R.color.grey_password_field),
+                    focusedIndicatorColor = colorResource(id = R.color.transparent),
+                    disabledIndicatorColor = colorResource(id = R.color.transparent),
+                    unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                    cursorColor = colorResource(id = R.color.white)
+                ),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Password,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
+                visualTransformation =
+                if (passwordVisible) VisualTransformation.Companion.None
+                        else PasswordVisualTransformation(),
+
+                trailingIcon = {
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+                    val description = if (passwordVisible) "Hide Password"
+                    else "Show Password"
+
+                    IconButton(onClick = {
+                        passwordVisible = !passwordVisible
+                    })
+                    {
+                        if (passwordVisible) {
+                            Icon(
+                                imageVector = Icons.Outlined.Visibility,
+                                contentDescription = description,
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier.size(24.dp)
+                            )
+                        }
+                        else {
+                            Icon(
+                                painter = painterResource(id = R.drawable.eye_slash3x),
+                                contentDescription = description,
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier.size(24.dp)
+                            )
+                        }
+                    }
+                }
+                )
+
+            Spacer(modifier = Modifier.height(15.dp))
+            ClickableText(
+                onClick = {
+                    Log.d("onClick_test", "Forgot Password Clicked")
+                    navHostController.navigate(Screen.ForgotPassword.route)
+                },
+                modifier = Modifier
+                    .padding(end = 15.dp)
+                    .align(Alignment.End),
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Normal,
+                    color = colorResource(id = R.color.yellow_text),
+                ),
+                text = AnnotatedString("Forgot Password"),
+            )
+
+        }
+
+        Button(
+            onClick = {
+                Log.d("test_button", "onClick")
+                navHostController.popBackStack()
+                navHostController.navigate(Screen.BottomBarMainScreen.route)
+            },
+            modifier = Modifier
+                .padding(
+                    start = 15.dp, end = 15.dp,
+                    bottom = 109.dp
+                )
+                .align(Alignment.BottomCenter)
+                .background(colorResource(id = R.color.transparent))
+                .fillMaxWidth()
+                .height(60.dp),
+            shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+            colors = ButtonDefaults.buttonColors(
+                contentColor = colorResource(id = R.color.blue_text),
+                containerColor = colorResource(id = R.color.white),
+            ),
+            )
+        {
+            Text(text = "Sign In",
+                fontSize = 18.sp,
+                fontWeight = FontWeight.Medium,
+                fontStyle = FontStyle.Normal
+            )
+        }
+        Row (
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(57.dp),
+        ){
+            TextMsgSignUp(navHostController = navHostController)
+//            Text(
+//                modifier = Modifier
+//                    .padding(0.dp),
+//                fontSize = 14.sp,
+//                fontWeight = FontWeight.Normal,
+//                fontStyle = FontStyle.Normal,
+//                text = "Don't have an account? ",
+//                color = Color.White,
+//            )
+//            ClickableText(
+//                onClick = {
+//                    navHostController.navigate(Screen.SignUp.route)
+//                },
+//                modifier = Modifier
+//                    .padding(0.dp),
+//                style = TextStyle(
+//                    fontSize = 14.sp,
+//                    fontStyle = FontStyle.Normal,
+//                    color = colorResource(id = R.color.yellow_text),
+//                ),
+//                text = AnnotatedString(" Sign Up"),
+//            )
+        }
+    }
+
+}
+
+@Composable
+fun RowScope.TextMsgSignUp(navHostController: NavHostController) {
+
+        Text(
+            modifier = Modifier
+                .padding(0.dp),
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Normal,
+            fontStyle = FontStyle.Normal,
+            text = "Don't have an account? ",
+            color = Color.White,
+        )
+        ClickableText(
+            onClick = {
+                navHostController.navigate(Screen.SignUp.route)
+            },
+            modifier = Modifier
+                .padding(0.dp),
+            style = TextStyle(
+                fontSize = 14.sp,
+                fontStyle = FontStyle.Normal,
+                color = colorResource(id = R.color.yellow_text),
+            ),
+            text = AnnotatedString(" Sign Up"),
+        )
+
+}
+
+@Composable
+fun ColumnScope.TextMsg(fontSize: TextUnit, text: String, color: Color) {
+    Text(
+        modifier = Modifier
+            .padding(start = 15.dp)
+            .align(Alignment.Start),
+        fontSize = fontSize,
+        fontWeight = FontWeight.Normal,
+        text = text,
+        color = color,
+    )
+}
+
+@Preview
+@Composable
+fun LoginPreview() {
+    Login(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun LoginPreviewDark() {
+    Login(rememberNavController())
+}
+

app/src/main/java/com/vpn/fastestvpnservice/screens/ServerListScreen.kt

@@ -0,0 +1,848 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.widget.Toast
+import androidx.compose.animation.Animatable
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.LocalOverscrollConfiguration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Tab
+import androidx.compose.material.TabRowDefaults
+import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.FileDownload
+import androidx.compose.material.icons.filled.FilterList
+import androidx.compose.material.icons.outlined.FilterList
+import androidx.compose.material3.DockedSearchBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.ShapeDefaults
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
+import androidx.compose.ui.res.painterResource
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.Server
+import com.vpn.fastestvpnservice.beans.allLocationsList
+import com.vpn.fastestvpnservice.beans.dvpnList
+import com.vpn.fastestvpnservice.beans.favList
+import com.vpn.fastestvpnservice.beans.p2pList
+import com.vpn.fastestvpnservice.beans.recentList
+import com.vpn.fastestvpnservice.beans.recommendedList
+import com.vpn.fastestvpnservice.beans.smartList
+import com.vpn.fastestvpnservice.beans.streamingList
+import com.vpn.fastestvpnservice.customItems.CountryItem
+import com.vpn.fastestvpnservice.customItems.ServerItem
+import com.vpn.fastestvpnservice.customItems.ServerSearchItem
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun ServerList(navHostController: NavHostController, isAllLocationsShown: Boolean) {
+    val focusManager = LocalFocusManager.current
+    val context = LocalContext.current
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                color = MaterialTheme.colorScheme.background
+            )
+
+    ) {
+        HeaderRowSL(navHostController = navHostController)
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .padding(top = 100.dp)
+        ) {
+            ShowSearchBar()
+
+            val serverTabItems = listOf("Recommended", "All Locations")
+            val pagerState = rememberPagerState(pageCount = {serverTabItems.size})
+            val selectedIndex by remember { derivedStateOf { pagerState.currentPage } }
+            val scope = rememberCoroutineScope()
+
+            if (Screen.ServerList.isTrue) {
+                LaunchedEffect(key1 = true) {
+                    scope.launch {
+                        pagerState.animateScrollToPage(1)
+                    }
+                }
+            }
+
+            TabRow(
+                selectedTabIndex = selectedIndex,
+                containerColor = Color.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp)
+                    .background(Color.Transparent)
+                    .clip(RoundedCornerShape(28.dp))
+                    .height(68.dp)
+                   ,
+                indicator = {
+//                    TabRowDefaults.Indicator()
+                },
+                divider = {}
+            ) {
+                serverTabItems.forEachIndexed { index, currentTab ->
+
+                    val color = remember { Animatable(Color.White) }
+
+                    LaunchedEffect(key1 = selectedIndex == index) {
+                        color.animateTo(
+                            if (selectedIndex == index) Color(0xFFE9EDF9)
+                            else Color.White
+                        )
+                    }
+
+                    Tab(
+                        selected = selectedIndex == index,
+                        onClick = {
+                            scope.launch {
+                                pagerState.animateScrollToPage(index)
+                            }
+                        },
+                        selectedContentColor = Color.White,
+                        unselectedContentColor = Color.White,
+                        text = { Text(text = currentTab,
+                            style = TextStyle(
+                                color = colorResource(id = R.color.dark_blue_gray_text),
+                                fontSize = 14.sp,
+                                textAlign = TextAlign.Center
+                            )
+                            ) },
+                        modifier = Modifier
+                            .padding(
+                                start = 10.dp, end = 10.dp,
+                                top = 10.dp, bottom = 10.dp
+                            )
+                            .background(
+                                color = color.value,
+                                shape = RoundedCornerShape(20.dp)
+                            )
+
+                    )
+                }
+            }
+
+                HorizontalPager(
+                    state = pagerState,
+                    modifier = Modifier
+                        .padding(top = 14.dp)
+                        .fillMaxWidth()
+                        .background(Color.Transparent)
+                ) { page ->
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(top = 0.dp, bottom = 10.dp)
+                    ) {
+                        if (page == 0) {
+                            ShowRecommendedList()
+                        }
+                        else if (page == 1) {
+                            ShowAllLocationsList()
+                        }
+                    }
+                }
+        }
+    }
+}
+
+@Composable
+fun BoxScope.HeaderRowSL(
+    navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 55.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(30.dp, 32.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 55.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Select Location",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun ColumnScope.ShowRecommendedList() {
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
+    ) {
+        LazyColumn(
+            modifier = Modifier
+                .padding(top = 14.dp),
+        ) {
+            /* Fav List */
+            item{
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.Start,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 10.dp, bottom = 10.dp)
+                        .background(Color.Transparent)
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.unfav_server3x),
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(bottom = 0.dp)
+                            .size(19.dp)
+                    )
+                    Text(text = "Favorite Location",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            color = MaterialTheme.colorScheme.primary
+                        ),
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 0.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                }
+            }
+            for (i in 1..1) {
+                items(items = favList) { server ->
+                    ServerItem(server)
+                }
+            }
+
+            /* Smart List */
+            item {
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.Start,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 24.dp, bottom = 10.dp)
+                        .background(Color.Transparent)
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.smartlogo3x),
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(bottom = 0.dp)
+                            .size(19.dp)
+                    )
+                    Text(text = "Smart Location",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            color = MaterialTheme.colorScheme.primary
+                        ),
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 0.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                }
+            }
+            items(items = smartList) { server ->
+                ServerItem(server)
+            }
+
+            /* Recent List */
+            item {
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.Start,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 24.dp, bottom = 10.dp)
+                        .background(Color.Transparent)
+                ) {
+                    Icon(
+                        painter = painterResource(
+                            id = R.drawable.recent3x),
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(bottom = 0.dp)
+                            .size(19.dp)
+                    )
+                    Text(text = "Recent Location",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            color = MaterialTheme.colorScheme.primary
+                        ),
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 0.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                }
+            }
+            items(items = recentList) { server ->
+                ServerItem(server)
+            }
+
+            /* Recommended List */
+            item {
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.Start,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 24.dp, bottom = 10.dp)
+                        .background(Color.Transparent)
+                ) {
+                    Icon(
+                        painter = painterResource(
+                            id = R.drawable.recommended3x),
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(bottom = 0.dp)
+                            .size(19.dp)
+                    )
+                    Text(text = "Recommended Location",
+                        style = TextStyle(
+                            fontSize = 16.sp,
+                            color = MaterialTheme.colorScheme.primary
+                        ),
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 0.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                }
+            }
+            items(items = recommendedList) { server ->
+                ServerItem(server)
+            }
+        }
+    }
+
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun ColumnScope.ShowAllLocationsList() {
+    val allLocationsTabItems = listOf(
+        "Countries", "Streaming", "D-VPN", "P2P"
+    )
+    val pagerState = rememberPagerState(pageCount = { allLocationsTabItems.size })
+    val selectedIndex by remember { derivedStateOf { pagerState.currentPage } }
+    val scope = rememberCoroutineScope()
+
+    TabRow(
+        selectedTabIndex = selectedIndex,
+        containerColor = Color.Transparent,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 0.dp)
+            .background(Color.Transparent)
+            .clip(RoundedCornerShape(0.dp))
+            .height(68.dp),
+        indicator = { selectedTab ->
+            TabRowDefaults.Indicator(
+                modifier = Modifier.tabIndicatorOffset(selectedTab[selectedIndex]),
+                color = colorResource(id = R.color.blue_text)
+            )
+        },
+//                                divider = {}
+    ) {
+        allLocationsTabItems.forEachIndexed { index1, locationTab ->
+//                                    val color = remember { Animatable(Color.Transparent) }
+            var color by remember { mutableStateOf(Color.Transparent) }
+            var alpha by remember { mutableFloatStateOf(1F) }
+
+                color =
+                    if (selectedIndex == index1)
+                        Color(0xFF2952c3)
+                    else MaterialTheme.colorScheme.primary
+                alpha = if (selectedIndex == index1)
+                    1F else 0.5F
+
+            Tab(
+                selected = selectedIndex == index1,
+                onClick = {
+                    scope.launch {
+                        pagerState.animateScrollToPage(index1)
+                    }
+                },
+                selectedContentColor = Color.White,
+                unselectedContentColor = Color.White,
+                text = {
+                    Text(
+                        text = locationTab,
+                        style = TextStyle(
+                            color = color,
+                            fontSize = 14.sp,
+                            textAlign = TextAlign.Center,
+                        ),
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .alpha(alpha)
+                    )
+                },
+                modifier = Modifier
+
+                    .background(
+//                        color = color.value,
+                        color = Color.Transparent,
+                        shape = RoundedCornerShape(0.dp)
+                    )
+            )
+        }
+    }
+
+    var isCountriesExpanded by rememberSaveable { mutableStateOf(true) }
+    var isStreamingExpanded by rememberSaveable { mutableStateOf(true) }
+    var isDvpnExpanded by rememberSaveable { mutableStateOf(true) }
+    var isP2PExpanded by rememberSaveable { mutableStateOf(true) }
+
+    val rotationState by animateFloatAsState(
+        targetValue = if (isCountriesExpanded) 180f else 0f,
+        label = if (isCountriesExpanded) "Show Less" else "Show More"
+    )
+    val rotationState2 by animateFloatAsState(
+        targetValue = if (isStreamingExpanded) 180f else 0f,
+        label = if (isStreamingExpanded) "Show Less" else "Show More"
+    )
+    val rotationState3 by animateFloatAsState(
+        targetValue = if (isDvpnExpanded) 180f else 0f,
+        label = if (isDvpnExpanded) "Show Less" else "Show More"
+    )
+    val rotationState4 by animateFloatAsState(
+        targetValue = if (isP2PExpanded) 180f else 0f,
+        label = if (isP2PExpanded) "Show Less" else "Show More"
+    )
+
+    HorizontalPager(
+        state = pagerState,
+        modifier = Modifier
+            .padding(top = 16.dp)
+            .fillMaxWidth()
+            .background(Color.Transparent)
+    ) { serverTabPager ->
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            var serverTitle by rememberSaveable { mutableStateOf("") }
+            var icon by rememberSaveable { mutableStateOf(0) }
+
+            when (serverTabPager) {
+                0 -> {
+                    serverTitle = allLocationsTabItems[0]
+                    icon = if (isCountriesExpanded) R.drawable.dragarrow3x
+                            else R.drawable.downarrow3x
+                }
+                1 -> {
+                    serverTitle = allLocationsTabItems[1]
+                    icon = if (isStreamingExpanded) R.drawable.dragarrow3x
+                    else R.drawable.downarrow3x
+                }
+                2 -> {
+                    serverTitle = allLocationsTabItems[2]
+                    icon = if (isDvpnExpanded) R.drawable.dragarrow3x
+                    else R.drawable.downarrow3x
+                }
+                3 -> {
+                    serverTitle = allLocationsTabItems[3]
+                    icon = if (isP2PExpanded) R.drawable.dragarrow3x
+                    else R.drawable.downarrow3x
+                }
+            }
+
+            ShowHeaderItem(serverTitle, icon, serverTabPager) {
+                when (serverTabPager) {
+                    0 -> {
+                        isCountriesExpanded = !isCountriesExpanded
+                    }
+                    1 -> {
+                        isStreamingExpanded = !isStreamingExpanded
+                    }
+                    2 -> {
+                        isDvpnExpanded = !isDvpnExpanded
+                    }
+                    3 -> {
+                        isP2PExpanded = !isP2PExpanded
+                    }
+                }
+            }
+
+            when (serverTabPager) {
+                    0 -> {
+                        if (isCountriesExpanded) {
+                            CompositionLocalProvider(
+                                LocalOverscrollConfiguration provides null
+                            ) {
+                                LazyColumn() {
+                                    items(items = allLocationsList) { country ->
+                                        CountryItem(server = country)
+                                    }
+                                }
+                            }
+
+                        }
+                    }
+                    1 -> {
+                        if (isStreamingExpanded) {
+                            CompositionLocalProvider(
+                                LocalOverscrollConfiguration provides null
+                            ) {
+
+                                LazyColumn() {
+                                    items(items = streamingList) { streaming ->
+                                        ServerItem(server = streaming)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    2 -> {
+                        if (isDvpnExpanded) {
+                            CompositionLocalProvider(
+                                LocalOverscrollConfiguration provides null
+                            ) {
+                                LazyColumn() {
+                                    items(items = dvpnList) { dvpn ->
+                                        ServerItem(server = dvpn)
+                                    }
+                                }
+                            }
+
+                        }
+                    }
+                    3 -> {
+                        if (isP2PExpanded) {
+                            CompositionLocalProvider(
+                                LocalOverscrollConfiguration provides null
+                            ) {
+                                LazyColumn() {
+                                    items(items = p2pList) { p2p ->
+                                        ServerItem(server = p2p)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.ShowHeaderItem(
+    serverTitle: String,
+    icon: Int,
+    serverTabPager: Int,
+    onClick: () -> Unit
+) {
+    Row(
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 10.dp, bottom = 10.dp)
+            .background(Color.Transparent)
+    ) {
+        Text(
+            text = serverTitle,
+            style = TextStyle(
+                fontSize = 16.sp,
+                color = MaterialTheme.colorScheme.primary
+            ),
+            modifier = Modifier
+                .padding(start = 0.dp, bottom = 0.dp)
+                .align(Alignment.CenterVertically)
+        )
+        Icon(
+            painter = painterResource(id = icon),
+            contentDescription = "Server Logo",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier
+                .padding(bottom = 0.dp, end = 12.dp)
+                .size(12.dp, 7.dp)
+                .align(Alignment.CenterVertically)
+//                        .rotate(rotationState)
+//                        .rotate(rotationState2)
+//                        .rotate(rotationState3)
+//                        .rotate(rotationState4)
+                .pointerInput(Unit) {
+                    detectTapGestures {
+                        when (serverTabPager) {
+                            0 -> {
+                                onClick()
+                            }
+
+                            1 -> {
+                                onClick()
+                            }
+
+                            2 -> {
+                                onClick()
+                            }
+
+                            3 -> {
+                                onClick()
+                            }
+                        }
+                    }
+                }
+        )
+    }
+
+    Surface(
+        modifier = Modifier
+            .padding(top = 11.dp, end = 0.dp)
+            .height(1.dp)
+            .fillMaxWidth()
+            .alpha(0.6F)
+        ,
+        color = colorResource(id = R.color.gray_icon)
+    ) {}
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun ColumnScope.ShowSearchBar() {
+    var searchText by remember { mutableStateOf("") }
+    var isActive by remember { mutableStateOf(false) }
+
+    var isFilter by remember { mutableStateOf(false) }
+    val sheetState = rememberModalBottomSheetState()
+    val filterList = listOf("Popularity", "Alphabetically")
+    var selectedFilterList by remember { mutableStateOf(filterList[0]) }
+    val context = LocalContext.current
+
+    SearchBar(
+        query = searchText,
+        onQueryChange = {
+            searchText = it
+        },
+        onSearch = {
+            isActive = false
+        },
+        active = isActive,
+        onActiveChange = {
+            isActive = it
+        },
+        placeholder = {
+            Text(
+                text = "Search Location",
+                style = TextStyle(
+                    fontSize = 14.sp,
+                    color = colorResource(id = R.color.dark_blue_gray_text)
+                ),
+                modifier = Modifier
+
+            )
+        },
+        leadingIcon = {
+            Icon(
+                painter = painterResource(id = R.drawable.search3x),
+                contentDescription = "Search Icon",
+
+                modifier = Modifier
+                    .size(21.dp)
+            )
+        },
+        trailingIcon = {
+            IconButton(onClick = { isFilter = true }) {
+                Icon(
+                    painter = painterResource(id = R.drawable.filter3x),
+                    contentDescription = "Search Icon",
+                    tint = colorResource(id = R.color.dark_blue_gray_text),
+                    modifier = Modifier
+                        .size(24.dp)
+                )
+            }
+        },
+        colors = SearchBarDefaults.colors(
+            containerColor = colorResource(id = R.color.white),
+            dividerColor = Color.Transparent,
+            inputFieldColors = TextFieldDefaults.colors(
+                focusedTextColor = colorResource(id = R.color.dark_blue_gray_text),
+                unfocusedTextColor = colorResource(id = R.color.dark_blue_gray_text)
+            )
+        ),
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        CompositionLocalProvider(
+            LocalOverscrollConfiguration provides null
+        ) {
+            LazyColumn(
+                modifier = Modifier
+                    .padding(top = 0.dp, bottom = 0.dp),
+            ) {
+                for (i in 1..20) {
+                    items(items = favList) { server ->
+                        ServerSearchItem(server)
+                    }
+                }
+            }
+        }
+    }
+
+    if (isFilter) {
+        ModalBottomSheet(
+            onDismissRequest = { isFilter = false },
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.background
+        ) {
+            Box(modifier = Modifier
+                .background(Color.Transparent)
+                .fillMaxWidth()
+                .height(215.dp)
+                .padding(start = 0.dp, top = 10.dp),
+            ) {
+                Column(
+                    verticalArrangement = Arrangement.Top,
+                    horizontalAlignment = Alignment.Start
+                ) {
+                    AddTextSettings(
+                        text = "Sort By",
+                        size = 18.sp,
+                        color = MaterialTheme.colorScheme.primary,
+                        bottomPadding = 20.dp,
+                        startPadding = 16.dp
+                    )
+                    filterList.forEach { filter ->
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .background(Color.Transparent)
+                                .padding(start = 2.dp)
+//                                    .selectable(
+//                                        selected = selectedProtocol == protocol,
+//                                        onClick = {
+//                                            selectedProtocol = protocol
+//                                        },
+//                                    )
+//                                    .indication(
+//                                        indication = null,
+//                                        interactionSource = remember {
+//                                            MutableInteractionSource()
+//                                        }
+//                                    )
+                            ,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            RadioButton(
+                                selected = filter == selectedFilterList,
+                                onClick = {
+                                    selectedFilterList = filter
+
+                                },
+                                colors = RadioButtonDefaults.colors(
+                                    selectedColor = colorResource(id = R.color.radio_button_blue),
+                                    unselectedColor = colorResource(id = R.color.gray_icon)),
+                            )
+                            Text(text = filter,
+                                modifier = Modifier.padding(start = 12.dp),
+                                style = TextStyle(
+                                    fontSize = 14.sp,
+                                    color = MaterialTheme.colorScheme.primary
+                                )
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun ServerListPreview() {
+    ServerList(rememberNavController(), false)
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/SignUpScreen.kt

@@ -0,0 +1,484 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Done
+import androidx.compose.material.icons.filled.DoneOutline
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material.icons.outlined.Visibility
+import androidx.compose.material.icons.sharp.Visibility
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.LineHeightStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun SignUp(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+
+    Box(
+        modifier = Modifier
+            .paint(
+                painter = painterResource(id = R.drawable.bg_img3),
+                contentScale = ContentScale.FillBounds)
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+            .fillMaxSize()
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    focusManager.clearFocus()
+                    keyboardController?.hide()
+                }
+            }
+        ,
+//        contentAlignment = Alignment.Center
+
+    ) {
+        Column (
+            modifier = Modifier
+                .fillMaxHeight()
+                .fillMaxWidth()
+            ,
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+
+
+            Spacer(modifier = Modifier.height(50.dp))
+
+            IconButton(
+                onClick = {
+                    navHostController.popBackStack()
+                },
+                modifier = Modifier
+                    .padding(start = 16.dp, top = 25.dp)
+                    .align(Alignment.Start)
+            )
+            {
+                Icon(painter = painterResource(
+                    id = R.drawable.back_arrow3x),
+                    contentDescription = "Back Button",
+                    tint = colorResource(id = R.color.white),
+                    modifier = Modifier
+                        .height(36.dp)
+                        .width(36.dp)
+                        .align(Alignment.Start),
+                )
+            }
+            Spacer(modifier = Modifier.height(44.dp))
+
+            Image(
+                painter = painterResource(id = R.drawable.fastestapp_logo3x),
+                contentDescription = "FastestVPN",
+                modifier = Modifier
+                    .size(75.dp, 102.dp)
+                    .background(Color.Transparent)
+                    .padding(top = 0.dp),
+            )
+            Spacer(modifier = Modifier.height(50.dp))
+            Text(
+                modifier = Modifier
+                    .padding(start = 15.dp)
+                    .align(Alignment.Start)
+                ,
+                fontSize = 28.sp,
+                fontWeight = FontWeight.Medium,
+                text = "Hello There!",
+                color = Color.White,
+            )
+            Text(
+                modifier = Modifier
+                    .padding(start = 15.dp)
+                    .align(Alignment.Start),
+                fontSize = 14.sp,
+                fontWeight = FontWeight.Normal,
+                text = "Please login to your account.",
+                color = colorResource(id = R.color.light_grey),
+            )
+            Spacer(modifier = Modifier.height(20.dp))
+
+            var textChanged by remember { mutableStateOf("") }
+
+
+            TextField(
+                value = textChanged,
+                onValueChange = {
+                    textChanged = it
+                },
+
+                textStyle = TextStyle(
+                    fontSize = 20.sp,
+                    color = colorResource(id = R.color.white),
+
+                    ),
+                modifier = Modifier
+                    .padding(start = 15.dp, end = 15.dp, top = 10.dp)
+                    .align(Alignment.Start)
+                    .fillMaxWidth()
+                    .height(60.dp)
+                    .border(
+                        1.dp,
+                        color = colorResource(id = R.color.white),
+                        shape = RoundedCornerShape(16.dp)
+                    ),
+
+//                placeholder = {
+//                    Text(text = "Enter email address",
+//                        color = colorResource(id = R.color.white),
+//                        fontSize = 14.sp,
+//                    )
+//                },
+                label = {
+                    Text(text = "Email",
+                        style = TextStyle(
+                            colorResource(id = R.color.white),
+                            fontSize = 12.sp
+                        )
+                    )
+                },
+                leadingIcon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.sms3x),
+                        contentDescription = "Email Logo",
+                        tint = colorResource(id = R.color.white),
+                        modifier = Modifier
+                            .size(24.dp, 24.dp)
+                    )
+                },
+                maxLines = 1,
+                colors = TextFieldDefaults.colors(
+                    focusedLabelColor = Color.Blue,
+                    unfocusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedContainerColor = colorResource(id = R.color.transparent),
+                    focusedIndicatorColor = colorResource(id = R.color.transparent),
+                    disabledIndicatorColor = colorResource(id = R.color.transparent),
+                    unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                    cursorColor = colorResource(id = R.color.white)
+                ),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Email,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
+
+                )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            var passwordChanged by remember { mutableStateOf("") }
+            var passwordVisible by remember { mutableStateOf(false) }
+
+            TextField(
+                value = passwordChanged,
+                onValueChange = {
+                    Log.d("onClick_test", "onValueChange -> ")
+                    passwordChanged = it
+                },
+
+                textStyle = TextStyle(
+                    fontSize = 20.sp,
+                    color = colorResource(id = R.color.white),
+
+                    ),
+                modifier = Modifier
+                    .padding(start = 15.dp, end = 15.dp)
+                    .align(Alignment.Start)
+                    .fillMaxWidth()
+                    .height(60.dp)
+                    .border(
+                        1.dp,
+                        color = colorResource(id = R.color.grey_password_field),
+                        shape = RoundedCornerShape(16.dp)
+                    )
+                    .background(color = colorResource(id = R.color.transparent)),
+
+                shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+                label = {
+                    Text(text = "Password",
+                        style = TextStyle(
+                            colorResource(id = R.color.white),
+                            fontSize = 16.sp
+                        )
+                    )
+                },
+                leadingIcon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.lock3x),
+                        contentDescription = "Password Logo",
+                        tint = colorResource(id = R.color.white),
+                        modifier = Modifier
+                            .size(24.dp, 24.dp)
+                    )
+                },
+                maxLines = 1,
+                colors = TextFieldDefaults.colors(
+                    focusedLabelColor = Color.Blue,
+                    unfocusedContainerColor = colorResource(id = R.color.grey_password_field),
+                    focusedContainerColor = colorResource(id = R.color.grey_password_field),
+                    focusedIndicatorColor = colorResource(id = R.color.transparent),
+                    disabledIndicatorColor = colorResource(id = R.color.transparent),
+                    unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+                    cursorColor = colorResource(id = R.color.white)
+                ),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Password,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
+                visualTransformation =
+                if (passwordVisible) VisualTransformation.None
+                else PasswordVisualTransformation(),
+
+                trailingIcon = {
+                    Log.d("onClick_test", "trailingIcon -> ")
+
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+                    val description = if (passwordVisible) "Hide Password"
+                    else "Show Password"
+
+                    IconButton(onClick = {
+                        passwordVisible = !passwordVisible
+                    })
+                    {
+                        if (passwordVisible) {
+                            Icon(
+                                imageVector = Icons.Outlined.Visibility,
+                                contentDescription = description,
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier.size(24.dp)
+                            )
+                        }
+                        else {
+                            Icon(
+                                painter = painterResource(id = R.drawable.eye_slash3x),
+                                contentDescription = description,
+                                tint = colorResource(id = R.color.white),
+                                modifier = Modifier.size(24.dp)
+                            )
+                        }
+
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(15.dp))
+
+            Row (
+                modifier = Modifier
+                    .padding(start = 15.dp, top = 16.dp)
+                    .fillMaxWidth(),
+            ){
+
+                Icon(
+                    painter = painterResource(id = R.drawable.tick_square3x),
+                    contentDescription = "Logo",
+                    tint = colorResource(id = R.color.white),
+                    modifier = Modifier.size(24.dp, 24.dp)
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(start = 15.dp),
+                    fontSize = 15.sp,
+                    fontStyle = FontStyle.Normal,
+                    text = "By creating your account, you agree to",
+                    color = colorResource(id = R.color.white),
+                )
+            }
+
+            Spacer(modifier = Modifier.height(0.dp))
+
+            Row (
+                modifier = Modifier
+                    .padding(start = 15.dp)
+                    .fillMaxWidth(),
+            ){
+
+                Icon(
+                    painter = painterResource(id = R.drawable.tick_square3x),
+                    contentDescription = "Logo",
+                    tint = colorResource(id = R.color.transparent),
+                    modifier = Modifier.size(24.dp),
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(start = 15.dp),
+                    fontSize = 15.sp,
+                    fontStyle = FontStyle.Normal,
+                    text = "Terms & Conditions",
+                    color = colorResource(id = R.color.yellow_text),
+                )
+            }
+
+        }
+
+        Button(
+            onClick = {
+                Log.d("test_button", "onClick")
+            },
+            modifier = Modifier
+                .padding(
+                    start = 15.dp, end = 15.dp,
+                    bottom = 100.dp
+                )
+                .align(Alignment.BottomCenter)
+                .background(colorResource(id = R.color.transparent))
+                .fillMaxWidth()
+                .height(60.dp),
+            shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+            colors = ButtonDefaults.buttonColors(
+                contentColor = colorResource(id = R.color.light_blue),
+                containerColor = colorResource(id = R.color.white),
+            ),
+        )
+        {
+            Text(text = "Sign Up",
+                style = TextStyle(
+                    fontSize = 18.sp,
+                    color = colorResource(id = R.color.blue_text),
+                    fontWeight = FontWeight.Medium
+                ),
+
+                )
+        }
+
+        Row (
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(40.dp),
+        ){
+            Text(
+                modifier = Modifier
+                    .padding(0.dp),
+                fontSize = 15.sp,
+                fontWeight = FontWeight.Normal,
+                fontStyle = FontStyle.Normal,
+                text = "Already have an account? ",
+                color = Color.White,
+            )
+            ClickableText(
+                onClick = {
+                    navHostController.popBackStack()
+
+                    if (navHostController.currentDestination?.id != null &&
+                        navHostController.currentDestination?.route != null){
+                        Log.d("test_signup", "From Sign In -> id = " + navHostController.currentDestination?.id
+                                + " route = " + navHostController.currentDestination?.route
+                        )
+                    }
+                    else {
+                        Log.d("test_signup", "From Sign Up -> id = " + navHostController.currentDestination?.id
+                                + " route = " + navHostController.currentDestination?.route
+                        )
+                        navHostController.navigate(Screen.Login.route)
+                    }
+
+                },
+                modifier = Modifier
+                    .padding(0.dp),
+                style = TextStyle(
+                    fontSize = 15.sp,
+                    fontStyle = FontStyle.Normal,
+                    color = colorResource(id = R.color.yellow),
+                ),
+                text = AnnotatedString(" Sign In"),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun SignUpPreview() {
+    SignUp(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun SignUpPreviewDark() {
+    SignUp(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/SplashScreen.kt

@@ -0,0 +1,126 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.graphics.fonts.Font
+import android.graphics.fonts.FontStyle
+import android.provider.CalendarContract.Colors
+import android.text.Layout
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.LineHeightStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.UiMode
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import kotlinx.coroutines.delay
+
+@Composable
+fun Splash(navHostController: NavHostController) {
+    Box(modifier = Modifier
+        .paint(
+            painter = painterResource(id = R.drawable.bg_img3),
+            contentScale = ContentScale.FillBounds)
+//        .background(if (isSystemInDarkTheme()) Color.Black
+//        else colorResource(id = R.color.transparent))
+        .fillMaxSize(),
+
+    ) {
+        Image(
+            modifier = Modifier
+                .width(146.dp)
+                .height(199.dp)
+                .align(Alignment.Center),
+            painter = painterResource(
+                id = R.drawable.fastestapp_logo3x),
+            contentDescription = "FastestVPN",
+            )
+        Image(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 83.dp)
+                .width(202.dp)
+                .height(28.dp),
+            painter = painterResource(
+                id = R.drawable.fastestvpn_name3),
+            contentDescription = "FastestVPN Name",
+        )
+        Row (
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(50.dp),
+        ){
+
+
+//            Text(
+//                modifier = Modifier
+//                    .padding(0.dp),
+//                fontSize = 30.sp,
+//                fontWeight = FontWeight.Bold,
+//                fontStyle = androidx.compose.ui.text.font.FontStyle.Italic,
+//                text = "Fastest",
+//                color = Color.White,
+//            )
+//            Text(
+//                modifier = Modifier
+//                    .padding(0.dp),
+//                fontSize = 30.sp,
+//                fontWeight = FontWeight.Bold,
+//                fontStyle = androidx.compose.ui.text.font.FontStyle.Italic,
+//                text = "VPN",
+//                color = colorResource(id = R.color.yellow),
+//            )
+        }
+
+    }
+
+    LaunchedEffect(key1 = true) {
+        delay(3000)
+        navHostController.popBackStack()
+        navHostController.navigate(Screen.Started.route)
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Composable
+fun SplashDarkThemePreview() {
+    Splash(navHostController = rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun SplashDarkThemePreviewDark() {
+    Splash(navHostController = rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/StartedScreen.kt

@@ -0,0 +1,215 @@
+package com.vpn.fastestvpnservice.screens
+
+import android.content.res.Configuration
+import android.util.Log
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.UiMode
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@Composable
+fun Started(navHostController: NavHostController) {
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
+    Box (
+        modifier = Modifier
+            .fillMaxSize()
+            .paint(
+                painter = painterResource(id = R.drawable.bg_img3),
+                contentScale = ContentScale.FillBounds)
+//            .background(
+//                if (isSystemInDarkTheme()) Color.Black
+//                else Color.Transparent
+//            )
+        ,
+        contentAlignment = Alignment.BottomCenter
+        ) {
+        Column (
+            verticalArrangement = Arrangement.Bottom,
+            horizontalAlignment = Alignment.CenterHorizontally,
+
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Color.Transparent),
+        ) {
+
+            Column (
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.padding(bottom = 25.dp)
+            ) {
+                Text(
+                    modifier = Modifier
+                        .padding(bottom = 25.dp),
+                    fontSize = 30.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    text = "Secure. Fast. Stable.",
+                    color = colorResource(id = R.color.white),
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(start = 0.dp),
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.Normal,
+                    text = "Top-notch security, blazing speed,",
+                    color = colorResource(id = R.color.light_grey),
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(start = 0.dp),
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.Normal,
+                    text = "Unwavering stability. Your digital world,",
+                    color = colorResource(id = R.color.light_grey),
+                )
+                Text(
+                    modifier = Modifier
+                        .padding(start = 0.dp),
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.Normal,
+                    text = "Protected.",
+                    color = colorResource(id = R.color.light_grey),
+                )
+            }
+
+            Row (
+                modifier = Modifier
+                    .padding(bottom = 50.dp),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.Bottom
+
+            ) {
+                Button(
+                    onClick = {
+                        Log.d("test_button", "onClick Send Code")
+                        navHostController.popBackStack()
+                        navHostController.navigate(Screen.Login.route)
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 15.dp, end = 5.dp,
+                            bottom = 15.dp, top = 15.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(60.dp),
+
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.light_blue),
+                        containerColor = colorResource(id = R.color.white),
+                    ),
+                )
+                {
+                    Text(text = "Sign In", fontSize = 20.sp)
+                    Log.d("test_button", "RowScope")
+                }
+
+                Button(
+                    onClick = {
+                        Log.d("test_button", "onClick Send Code")
+                        navHostController.popBackStack()
+                        navHostController.navigate(Screen.SignUp.route)
+                        },
+                    modifier = Modifier
+                        .padding(
+                            start = 5.dp, end = 15.dp,
+                            bottom = 15.dp, top = 15.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(60.dp),
+
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.transparent),
+                    ),
+                    border = BorderStroke(2.dp,
+                        colorResource(id = R.color.white))
+                )
+                {
+                    Text(text = "Sign Up", fontSize = 20.sp)
+                    Log.d("test_button", "RowScope")
+                }
+            }
+        }
+    }
+
+    Image(
+        painter = painterResource(id = R.drawable.map2),
+        contentDescription = "FastestVPN Map",
+        modifier = Modifier
+            .background(Color.Transparent)
+            .height(screenHeight)
+            .padding(top = 50.dp)
+            .width(screenWidth)
+        ,
+        alignment = Alignment.TopCenter
+    )
+    Image(
+        painter = painterResource(id = R.drawable.lines_fvpn3x),
+        contentDescription = "FastestVPN Lines",
+        modifier = Modifier
+            .background(Color.Transparent)
+            .width(screenWidth)
+            .height(screenHeight)
+            .padding(top = 123.dp, start = 27.dp,
+                end = 27.dp)
+        ,
+        alignment = Alignment.TopCenter
+    )
+
+}
+
+@Preview
+@Composable
+fun StartedPreview() {
+    Started(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun StartedPreviewDark() {
+    Started(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/accountScreensAll/ChangePasswordScreen.kt

@@ -0,0 +1,531 @@
+package com.vpn.fastestvpnservice.screens.accountScreensAll
+
+import android.content.res.Configuration
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.outlined.Visibility
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.subscriptionPackageList
+import com.vpn.fastestvpnservice.customItems.getSelectedPosition
+
+@Composable
+fun ChangePassword(navHostController: NavHostController) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    focusManager.clearFocus()
+                    keyboardController?.hide()
+                }
+            }
+    ) {
+        HeaderRowCP(navHostController = navHostController)
+
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .padding(top = 130.dp)
+                .fillMaxWidth()
+                .background(Color.Transparent)
+
+        ) {
+            TextFieldCurrPass()
+            Spacer(modifier = Modifier.height(25.dp))
+            TextFieldNewPass()
+            Spacer(modifier = Modifier.height(25.dp))
+            TextFieldReWriteNewPass()
+
+            Button(
+                onClick = {
+                    Log.d("test_button", "onClick")
+                },
+                modifier = Modifier
+                    .padding(
+                        top = 30.dp,
+                        start = 16.dp, end = 16.dp
+                    )
+                    .background(colorResource(id = R.color.transparent))
+                    .fillMaxWidth()
+                    .height(60.dp),
+                shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+                colors = ButtonDefaults.buttonColors(
+                    contentColor = colorResource(id = R.color.white),
+                    containerColor = colorResource(id = R.color.blue_text),
+                ),
+            )
+            {
+                Text(text = "Save",
+                    style = TextStyle(
+                        color = colorResource(id = R.color.white),
+                        textAlign = TextAlign.Center,
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.SemiBold,
+                        fontStyle = FontStyle.Normal
+                    )
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.TextFieldCurrPass() {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    var passwordChanged by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+
+    TextField(
+        value = passwordChanged,
+        onValueChange = {
+            Log.d("onClick_test", "onValueChange -> ")
+            passwordChanged = it
+        },
+
+        textStyle = TextStyle(
+            fontSize = 20.sp,
+            color = colorResource(id = R.color.dark_blue_gray_text),
+            ),
+        modifier = Modifier
+            .padding(start = 15.dp, end = 15.dp)
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .height(60.dp)
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.white),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+
+        shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+        label = {
+            androidx.compose.material3.Text(text = "Current Password",
+                style = TextStyle(
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 16.sp,
+                    textAlign = TextAlign.Center
+                    )
+            )
+        },
+        leadingIcon = {
+            androidx.compose.material3.Icon(
+                painter = painterResource(id = R.drawable.lock3x),
+                contentDescription = "Password Logo",
+                tint = colorResource(id = R.color.dark_blue_gray_text),
+                modifier = Modifier
+                    .size(24.dp, 24.dp)
+            )
+        },
+        maxLines = 1,
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = Color.Blue,
+            unfocusedContainerColor = colorResource(id = R.color.white),
+            focusedContainerColor = colorResource(id = R.color.white),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.dark_blue_gray_text)
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+        visualTransformation =
+        if (passwordVisible) VisualTransformation.None
+        else PasswordVisualTransformation(),
+
+        trailingIcon = {
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+            val description = if (passwordVisible) "Hide Password"
+            else "Show Password"
+
+            androidx.compose.material3.IconButton(onClick = {
+                passwordVisible = !passwordVisible
+            })
+            {
+                if (passwordVisible) {
+                    androidx.compose.material3.Icon(
+                        imageVector = Icons.Outlined.Visibility,
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+                else {
+                    androidx.compose.material3.Icon(
+                        painter = painterResource(id = R.drawable.eye_slash3x),
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun ColumnScope.TextFieldNewPass() {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    var passwordChanged by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+
+    TextField(
+        value = passwordChanged,
+        onValueChange = {
+            Log.d("onClick_test", "onValueChange -> ")
+            passwordChanged = it
+        },
+
+        textStyle = TextStyle(
+            fontSize = 20.sp,
+            color = colorResource(id = R.color.dark_blue_gray_text),
+        ),
+        modifier = Modifier
+            .padding(start = 15.dp, end = 15.dp)
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .height(60.dp)
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.white),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+
+        shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+        label = {
+            androidx.compose.material3.Text(text = "New Password",
+                style = TextStyle(
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 16.sp,
+                    textAlign = TextAlign.Center
+                )
+            )
+        },
+        leadingIcon = {
+            androidx.compose.material3.Icon(
+                painter = painterResource(id = R.drawable.lock3x),
+                contentDescription = "Password Logo",
+                tint = colorResource(id = R.color.dark_blue_gray_text),
+                modifier = Modifier
+                    .size(24.dp, 24.dp)
+            )
+        },
+        maxLines = 1,
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = Color.Blue,
+            unfocusedContainerColor = colorResource(id = R.color.white),
+            focusedContainerColor = colorResource(id = R.color.white),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.dark_blue_gray_text)
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+        visualTransformation =
+        if (passwordVisible) VisualTransformation.None
+        else PasswordVisualTransformation(),
+
+        trailingIcon = {
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+            val description = if (passwordVisible) "Hide Password"
+            else "Show Password"
+
+            androidx.compose.material3.IconButton(onClick = {
+                passwordVisible = !passwordVisible
+            })
+            {
+                if (passwordVisible) {
+                    androidx.compose.material3.Icon(
+                        imageVector = Icons.Outlined.Visibility,
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+                else {
+                    androidx.compose.material3.Icon(
+                        painter = painterResource(id = R.drawable.eye_slash3x),
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun ColumnScope.TextFieldReWriteNewPass() {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    var passwordChanged by remember { mutableStateOf("") }
+    var passwordVisible by remember { mutableStateOf(false) }
+
+    TextField(
+        value = passwordChanged,
+        onValueChange = {
+            Log.d("onClick_test", "onValueChange -> ")
+            passwordChanged = it
+        },
+
+        textStyle = TextStyle(
+            fontSize = 20.sp,
+            color = colorResource(id = R.color.dark_blue_gray_text),
+        ),
+        modifier = Modifier
+            .padding(start = 15.dp, end = 15.dp)
+            .align(Alignment.Start)
+            .fillMaxWidth()
+            .height(60.dp)
+            .border(
+                1.dp,
+                color = colorResource(id = R.color.white),
+                shape = RoundedCornerShape(16.dp)
+            )
+            .background(color = colorResource(id = R.color.transparent)),
+
+        shape = RoundedCornerShape(15.dp),
+//                placeholder = {
+//                    Text(text = "Enter password",
+//                        color = colorResource(id = R.color.white))
+//                },
+        label = {
+            androidx.compose.material3.Text(text = "Rewrite New Password",
+                style = TextStyle(
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 16.sp,
+                    textAlign = TextAlign.Center
+                )
+            )
+        },
+        leadingIcon = {
+            androidx.compose.material3.Icon(
+                painter = painterResource(id = R.drawable.lock3x),
+                contentDescription = "Password Logo",
+                tint = colorResource(id = R.color.dark_blue_gray_text),
+                modifier = Modifier
+                    .size(24.dp, 24.dp)
+            )
+        },
+        maxLines = 1,
+        colors = TextFieldDefaults.colors(
+            focusedLabelColor = Color.Blue,
+            unfocusedContainerColor = colorResource(id = R.color.white),
+            focusedContainerColor = colorResource(id = R.color.white),
+            focusedIndicatorColor = colorResource(id = R.color.transparent),
+            disabledIndicatorColor = colorResource(id = R.color.transparent),
+            unfocusedIndicatorColor = colorResource(id = R.color.transparent),
+            cursorColor = colorResource(id = R.color.dark_blue_gray_text)
+        ),
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                focusManager.clearFocus()
+                keyboardController?.hide()
+            }
+        ),
+        visualTransformation =
+        if (passwordVisible) VisualTransformation.None
+        else PasswordVisualTransformation(),
+
+        trailingIcon = {
+//                    val image
+//                            = if (passwordVisible) Icons.Filled.Visibility
+//                    else Icons.Filled.VisibilityOff
+
+            val description = if (passwordVisible) "Hide Password"
+            else "Show Password"
+
+            androidx.compose.material3.IconButton(onClick = {
+                passwordVisible = !passwordVisible
+            })
+            {
+                if (passwordVisible) {
+                    androidx.compose.material3.Icon(
+                        imageVector = Icons.Outlined.Visibility,
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+                else {
+                    androidx.compose.material3.Icon(
+                        painter = painterResource(id = R.drawable.eye_slash3x),
+                        contentDescription = description,
+                        tint = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .size(24.dp)
+                            .alpha(0.5F)
+                    )
+                }
+            }
+        }
+    )
+}
+
+@Composable
+fun BoxScope.HeaderRowCP(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 50.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 50.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Change Password",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+@Preview
+@Composable
+fun ChangePasswordPreview() {
+    ChangePassword(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun ChangePasswordPreviewDark() {
+    ChangePassword(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/accountScreensAll/FavoriteServersScreen.kt

@@ -0,0 +1,124 @@
+package com.vpn.fastestvpnservice.screens.accountScreensAll
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.favList
+import com.vpn.fastestvpnservice.beans.favServersList
+import com.vpn.fastestvpnservice.customItems.FavoriteServerItem
+import com.vpn.fastestvpnservice.customItems.ServerItem
+
+@Composable
+fun FavoriteServers(navHostController: NavHostController) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+    )
+    {
+        HeaderRowFS(navHostController = navHostController)
+
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(
+                    top = 120.dp,
+                    start = 16.dp, end = 16.dp
+                )
+                .fillMaxSize()
+                .background(Color.Transparent)
+        ) {
+            LazyColumn() {
+                items(items = favServersList) {server ->
+                    FavoriteServerItem(server = server)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun BoxScope.HeaderRowFS(
+    navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 50.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 50.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Favorite Servers",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+
+@Preview
+@Composable
+fun FavoriteServersPreview() {
+    FavoriteServers(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun FavoriteServersPreviewDark() {
+    FavoriteServers(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/accountScreensAll/SubscriptionScreen.kt

@@ -0,0 +1,194 @@
+package com.vpn.fastestvpnservice.screens.accountScreensAll
+
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.LocalOverscrollConfiguration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.subscriptionList
+import com.vpn.fastestvpnservice.beans.subscriptionPackageList
+import com.vpn.fastestvpnservice.customItems.SubscriptionDataItem
+import com.vpn.fastestvpnservice.customItems.SubscriptionPackageItem
+import com.vpn.fastestvpnservice.customItems.getSelectedPosition
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun SubscriptionScreen(navHostController: NavHostController) {
+    var selectedPosition: Int = 0
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+    ) {
+        HeaderRowSS(navHostController = navHostController)
+
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(
+                    top = 120.dp,
+                    start = 16.dp, end = 16.dp,
+                    bottom = 120.dp
+                )
+                .fillMaxSize()
+                .background(Color.Transparent)
+        ) {
+            Text(text = "Upgrade Your Account",
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 18.sp,
+                    fontWeight = FontWeight.Medium
+                )
+            )
+
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier.padding(top = 30.dp)
+            ) {
+                CompositionLocalProvider(
+                    LocalOverscrollConfiguration provides null
+                ) {
+                    LazyColumn() {
+                        items(items = subscriptionList) {item ->
+                            SubscriptionDataItem(item = item)
+                        }
+                        item { Spacer(modifier = Modifier.height(20.dp)) }
+                        itemsIndexed(items = subscriptionPackageList) {position, plan ->
+                            SubscriptionPackageItem(item = plan, position)
+                        }
+                        item { Spacer(modifier = Modifier.height(20.dp)) }
+                    }
+                }
+            }
+        }
+
+        val context = LocalContext.current
+        Button(
+            onClick = {
+                Log.d("test_button", "onClick")
+                selectedPosition = getSelectedPosition()
+                Toast
+                    .makeText(
+                        context, subscriptionPackageList[selectedPosition].packageDuration, Toast.LENGTH_SHORT
+                    )
+                    .show()
+            },
+            modifier = Modifier
+                .padding(
+                    top = 29.dp,
+                    start = 16.dp, end = 16.dp,
+                    bottom = 34.dp
+                )
+                .align(Alignment.BottomCenter)
+                .background(colorResource(id = R.color.transparent))
+                .fillMaxWidth()
+                .height(60.dp),
+            shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+            colors = ButtonDefaults.buttonColors(
+                contentColor = colorResource(id = R.color.white),
+                containerColor = colorResource(id = R.color.blue_text),
+            ),
+        )
+        {
+            Text(text = "Subscribe",
+                style = TextStyle(
+                    color = colorResource(id = R.color.white),
+                    textAlign = TextAlign.Center,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    fontStyle = FontStyle.Normal
+                )
+            )
+        }
+    }
+}
+
+@Composable
+fun BoxScope.HeaderRowSS(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 50.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 50.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Subscription",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+        )
+    }
+}
+
+@Preview
+@Composable
+fun SubscriptionScreenPreview() {
+    SubscriptionScreen(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/AccountScreen.kt

@@ -0,0 +1,457 @@
+package com.vpn.fastestvpnservice.screens.bottomNavBarScreens
+
+import android.content.res.Configuration
+import android.util.Log
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Logout
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Logout
+import androidx.compose.material.icons.filled.MonetizationOn
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.DialogProperties
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+//var LocalLoggedOut = staticCompositionLocalOf<Boolean> { false }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun Account(navHostController: NavHostController) {
+    var isLoggedOut by remember { mutableStateOf(false) }
+    var isDelete by remember { mutableStateOf(false) }
+
+    Box(modifier = Modifier
+        .background(MaterialTheme.colorScheme.background)
+        .fillMaxSize()
+//        contentAlignment = Alignment.Center
+
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(start = 16.dp, end = 24.dp)
+                .fillMaxSize()
+        ) {
+            Spacer(modifier = Modifier.height(60.dp))
+            AddTextAccount(
+                text = "Account",
+                size = 28.sp,
+                color = MaterialTheme.colorScheme.primary
+            )
+            AddRowAccount("Email:", "asif@yopmail.com")
+            AddRowAccount("Product:", "Lifetime Plan")
+            AddRowAccount("Account Status:", "Active")
+
+            Surface(
+                modifier = Modifier
+                    .padding(top = 24.dp, bottom = 0.dp)
+                    .height(1.dp)
+                    .fillMaxWidth(),
+                color = colorResource(id = R.color.gray_icon)
+            ) {}
+
+            AddRowAccountIcon(
+                icon = painterResource(id = R.drawable.subscription3x),
+                text = "Upgrade Subscription",
+                onClick = {
+                    navHostController.navigate(
+                        Screen.Subscription.route
+                    )
+                }
+            )
+            AddRowAccountIcon(
+                icon = painterResource(id = R.drawable.fav3x),
+                text = "Favorite Servers",
+                onClick = {
+                    navHostController.navigate(
+                        Screen.FavoriteServers.route
+                    )
+                }
+            )
+            AddRowAccountIcon(
+                icon = painterResource(id = R.drawable.lock3x),
+                text = "Change Password",
+                onClick = {
+                    navHostController.navigate(
+                        Screen.ChangePassword.route
+                    )
+                }
+            )
+            AddRowAccountIcon(
+                icon = painterResource(id = R.drawable.delete3x),
+                text = "Delete Account",
+                onClick = {
+                    isDelete = true
+                    Log.d("islogoutClicked?", "isDelete Yes")
+                }
+            )
+            AddRowAccountIcon(
+                icon = painterResource(id = R.drawable.logout3x),
+                text = "Logout",
+                onClick = {
+                    isLoggedOut = true
+                    Log.d("islogoutClicked?", "Yes")
+                }
+            )
+        }
+
+        if (isLoggedOut) {
+            Log.d("islogoutClicked", "isLoggedOut$isLoggedOut")
+
+            AlertDialog(
+                onDismissRequest = { isLoggedOut = false },
+                properties = DialogProperties(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(228.dp)
+                ) {
+                LogoutDialog("Logout Account",
+                    "Are you sure to logout the account?",
+                    onCancel = { isLoggedOut = false }
+                    )
+            }
+        }
+
+        if (isDelete) {
+            Log.d("islogoutClicked", "isDelete$isDelete")
+
+            AlertDialog(
+                onDismissRequest = { isDelete = false },
+                properties = DialogProperties(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(228.dp)
+            ) {
+                LogoutDialog("Delete Account",
+                    "Are you sure to delete the account?",
+                    onCancel = { isDelete = false }
+                    )
+            }
+        }
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddTextAccount(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        style = TextStyle(
+            fontSize = size,
+            color = color,
+            textAlign = TextAlign.Center,
+            fontStyle = FontStyle.Normal,
+            fontWeight = FontWeight.Medium,
+        ),
+    )
+}
+
+@Composable
+fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 16.dp)
+            .background(Color.Transparent)
+            .height(18.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = title,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 14.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 10.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+//        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Text(text = subTitle,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 14.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium,
+                    textAlign = TextAlign.Right,
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .weight(1f)
+                    .alpha(0.6F)
+            )
+        }
+
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ColumnScope.AddRowAccountIcon(
+    icon: Painter,
+    text: String,
+    onClick : () -> Unit
+) {
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .height(30.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    onClick()
+                }
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = icon,
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+        }
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 5.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+        }
+
+
+    }
+
+
+}
+
+@Composable
+fun BoxScope.LogoutDialog(
+    title: String,
+    desc: String,
+    onCancel : () -> Unit
+) {
+    Surface(
+        color = colorResource(id = R.color.white),
+        modifier = Modifier
+            .background(Color.Transparent)
+            .fillMaxWidth()
+        ,
+        shape = RoundedCornerShape(18.dp)
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .background(MaterialTheme.colorScheme.onPrimary)
+        ) {
+            Log.d("islogoutClicked", "AlertDialog")
+
+            Text(text = title,
+                style = TextStyle(
+                    fontSize = 18.sp,
+                    textAlign = TextAlign.Center,
+                    fontWeight = FontWeight.Medium,
+                    color = MaterialTheme.colorScheme.primary
+                ),
+                modifier = Modifier.padding(top = 45.dp)
+            )
+            Text(text = desc,
+                style = TextStyle(
+                    fontSize = 18.sp,
+                    textAlign = TextAlign.Center,
+                    color = MaterialTheme.colorScheme.primary,
+                    lineHeight = 30.sp
+                ),
+                maxLines = 2,
+                modifier = Modifier.padding(top = 26.dp)
+            )
+            Row (
+                modifier = Modifier
+                    .padding(top = 34.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Bottom
+            ) {
+                Button(
+                    onClick = {
+                        Log.d("test_button", "onClick Send Code")
+                        onCancel()
+//                                    navHostController.popBackStack()
+//                                    navHostController.navigate(Screen.Login.route)
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 15.dp, end = 5.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.light_blue),
+                    ),
+                )
+                {
+                    Text(text = "No", fontSize = 20.sp)
+                    Log.d("test_button", "RowScope")
+                }
+
+                Button(
+                    onClick = {
+                        Log.d("test_button", "onClick Send Code")
+//                                    navHostController.popBackStack()
+//                                    navHostController.navigate(Screen.SignUp.route)
+                    },
+                    modifier = Modifier
+                        .padding(
+                            start = 5.dp, end = 15.dp,
+                            bottom = 0.dp, top = 0.dp
+                        )
+                        .background(colorResource(id = R.color.transparent))
+                        .weight(1F)
+                        .height(52.dp),
+                    shape = RoundedCornerShape(15.dp),
+                    colors = ButtonDefaults.buttonColors(
+                        contentColor = colorResource(id = R.color.white),
+                        containerColor = colorResource(id = R.color.red),
+                    ),
+//                                border = BorderStroke(2.dp,
+//                                    colorResource(id = R.color.gray_icon))
+                )
+                {
+                    Text(text = "Yes", fontSize = 20.sp)
+                    Log.d("test_button", "RowScope")
+                }
+            }
+        }
+
+    }
+}
+
+@Preview
+@Composable
+fun AccountPreview() {
+    Account(rememberNavController())
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun AccountPreviewDark() {
+    Account(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/HelpScreen.kt

@@ -0,0 +1,218 @@
+package com.vpn.fastestvpnservice.screens.bottomNavBarScreens
+
+import android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Help
+import androidx.compose.material.icons.filled.ElectricBolt
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.EnergySavingsLeaf
+import androidx.compose.material.icons.filled.Help
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.PrivacyTip
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+
+@Composable
+fun Help(navHostController: NavHostController) {
+    Box(modifier = Modifier
+        .background(MaterialTheme.colorScheme.background)
+        .fillMaxSize(),
+//        contentAlignment = Alignment.Center
+
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(start = 16.dp, end = 24.dp)
+                .fillMaxSize()
+        ) {
+            Spacer(modifier = Modifier.height(60.dp))
+            AddTextHelp(
+                text = "Help",
+                size = 28.sp,
+                color = MaterialTheme.colorScheme.primary
+            )
+            AddRow(icon = R.drawable.faq3x,
+                text = "FAQ", navHostController = navHostController)
+            {
+                navHostController.navigate(
+                Screen.FAQ.route
+            )}
+            AddRow(icon = R.drawable.privacy3x,
+                text = "Privacy Policy", navHostController = navHostController) {
+                navHostController.navigate(
+                    Screen.PrivacyPolicy.route
+                )
+            }
+            AddRow(icon = R.drawable.terms3x,
+                text = "Terms and Conditions", navHostController = navHostController) {
+                navHostController.navigate(
+                    Screen.TermsAndConditions.route
+                )
+            }
+            AddRow(icon = R.drawable.about3x,
+                text = "About Fastest VPN", navHostController = navHostController) {
+                navHostController.navigate(
+                    Screen.About.route
+                )
+            }
+            AddRow(icon = R.drawable.customer_support3x,
+                text = "Customer Support",
+                navHostController = navHostController) {
+                navHostController.navigate(
+                    Screen.CustomerSupport.route
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddRow(
+    icon: Int,
+    text: String,
+    navHostController: NavHostController,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .height(30.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    Log.d("test_row", "Clicked Row ${onClick().toString()}")
+                    onClick()
+                }
+            }
+//            .clickable {
+//                Log.d("test_row", "Clicked Row ${onClick.toString()}")
+//                onClick()
+//            }
+                ,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(
+                    id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 5.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f)
+                    .alpha(1F),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)
+            )
+        }
+
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddTextHelp(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        style = TextStyle(
+            fontSize = size,
+            color = color,
+            textAlign = TextAlign.Center,
+            fontStyle = FontStyle.Normal,
+            fontWeight = FontWeight.Medium,
+        ),
+    )
+}
+
+@Preview
+@Composable
+fun HelpPreview() {
+    Help(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/HomeScreen.kt

@@ -0,0 +1,618 @@
+package com.vpn.fastestvpnservice.screens.bottomNavBarScreens
+
+import android.content.res.Configuration
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.LocalOverscrollConfiguration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import  androidx.compose.runtime.setValue
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.beans.isDarkTheme
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.ui.theme.FastestVPNTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun Home(navHostController: NavHostController) {
+
+    var isConnect by remember { mutableStateOf(false) }
+    Box(
+        modifier = Modifier
+            .background(MaterialTheme.colorScheme.background)
+            .paint(
+                if (isConnect) blueBackground() else pinkBackground(),
+                alignment = Alignment.TopStart,
+                contentScale = ContentScale.FillWidth,
+//                colorFilter = ColorFilter.tint(
+//                    color = colorResource(id = R.color.pink_color)),
+            )
+            .fillMaxSize(),
+//        contentAlignment = Alignment.TopCenter
+    ) {
+
+        if (!isDarkTheme.value) {
+            Image(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(Alignment.TopStart)
+                    .padding(top = 75.dp),
+                painter = painterResource(id = R.drawable.map_home3x),
+                contentDescription = "Home Map",
+                contentScale = ContentScale.FillWidth,
+            )
+        }
+
+        IconButton(
+            onClick = {
+                Log.d("test_button", "onClick Connect")
+                isConnect = !isConnect
+            },
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(top = 230.dp)
+                .size(234.dp),
+        )
+        {
+            if (isConnect) {
+                Image(
+                    painter = painterResource(id = R.drawable.iv_connect),
+                    contentDescription = "Home Map",
+                    contentScale = ContentScale.FillWidth,
+                )
+            } else {
+                Image(
+                    painter = painterResource(id = R.drawable.iv_disconnect),
+                    contentDescription = "Home Map",
+                    contentScale = ContentScale.FillWidth,
+                )
+            }
+        }
+        Column(
+            verticalArrangement = Arrangement.SpaceEvenly,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.Transparent)
+                .align(Alignment.TopStart)
+                .padding(top = 75.dp)
+                .height(125.dp),
+        ) {
+
+            AddText(
+                text = "IP 4122.762.21",
+                size = 18.sp,
+                color = MaterialTheme.colorScheme.primary
+            )
+            Row(
+            ) {
+                if (isConnect) {
+                    Image(
+                        painter = painterResource(id = R.drawable.spainlogo3x),
+                        contentDescription = "Spain",
+                        modifier = Modifier
+                            .padding(end = 6.dp)
+                            .size(20.dp)
+                    )
+                    AddText(
+                        text = "Madrid, Spain",
+                        size = 16.sp,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                } else {
+                    Image(
+                        painter = painterResource(id = R.drawable.pklogo3x),
+                        contentDescription = "Pakistan",
+                        modifier = Modifier
+                            .padding(end = 6.dp)
+                            .size(20.dp)
+                    )
+                    AddText(
+                        text = "Karachi, Pakistan",
+                        size = 16.sp,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                }
+            }
+            if (isConnect) {
+                AddText(
+                    text = "Connected",
+                    size = 18.sp,
+                    color = colorResource(id = R.color.light_blue_2)
+                )
+            } else {
+                AddText(
+                    text = "Disconnected",
+                    size = 18.sp,
+                    color = colorResource(id = R.color.maroon_text)
+                )
+            }
+        }
+
+        CompositionLocalProvider(
+            LocalOverscrollConfiguration provides null
+        ) {
+            Column(
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(top = 490.dp, bottom = 20.dp)
+                    .verticalScroll(rememberScrollState())
+                    .fillMaxSize()
+            ) {
+                /* Smart Connect Box*/
+                if (isConnect) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(16.dp)
+                            .padding(top = 0.dp)
+                            .height(110.dp)
+//                    .border(
+//                        border = BorderStroke(0.dp, Color.Blue),
+//                        shape = RoundedCornerShape(28.dp)
+//                    )
+                            .background(
+                                color = Color.Transparent
+                            ),
+//            contentAlignment = Alignment.TopCenter,
+                    ) {
+                        Row(
+                            modifier = Modifier
+                                .padding(0.dp)
+                                .background(Color.Transparent),
+                            horizontalArrangement = Arrangement.SpaceAround,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Surface(
+                                modifier = Modifier
+                                    .weight(1f)
+                                    .background(Color.Transparent)
+                                    .fillMaxHeight()
+                                    .padding(end = 5.dp),
+                                shape = RoundedCornerShape(24.dp)
+
+                            ) {
+                                Column(
+                                    modifier = Modifier
+                                        .background(Color.White),
+                                    verticalArrangement = Arrangement.SpaceEvenly,
+                                    horizontalAlignment = Alignment.CenterHorizontally
+                                ) {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.greenarrow3x),
+                                        contentDescription = "Green Arrow",
+                                        modifier = Modifier
+                                            .size(30.dp)
+                                    )
+                                    Text(
+                                        text = "Download",
+                                        style = TextStyle(
+                                            color = colorResource(id = R.color.text_color_dark_gray),
+                                            fontSize = 14.sp
+                                        )
+                                    )
+                                    Row(
+                                        horizontalArrangement = Arrangement.SpaceAround,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = "30.68",
+                                            style = TextStyle(
+                                                color = colorResource(id = R.color.black),
+                                                fontSize = 18.sp,
+                                                textAlign = TextAlign.Right
+                                            )
+                                        )
+                                        Text(
+                                            text = "  MB/S",
+                                            style = TextStyle(
+                                                color = colorResource(id = R.color.text_color_dark_gray),
+                                                fontSize = 12.sp,
+                                                fontWeight = FontWeight.Medium
+                                            )
+                                        )
+                                    }
+                                }
+                            }
+                            Surface(
+                                modifier = Modifier
+                                    .weight(1f)
+                                    .background(Color.Transparent)
+                                    .fillMaxHeight()
+                                    .padding(start = 5.dp),
+                                shape = RoundedCornerShape(24.dp)
+                            ) {
+                                Column(
+                                    modifier = Modifier
+                                        .background(Color.White),
+                                    verticalArrangement = Arrangement.SpaceEvenly,
+                                    horizontalAlignment = Alignment.CenterHorizontally
+                                ) {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.yellowarrow3x),
+                                        contentDescription = "Green Arrow",
+                                        modifier = Modifier
+                                            .size(30.dp)
+                                    )
+                                    Text(
+                                        text = "Upload",
+                                        style = TextStyle(
+                                            color = colorResource(id = R.color.text_color_dark_gray),
+                                            fontSize = 14.sp
+                                        )
+                                    )
+                                    Row(
+                                        horizontalArrangement = Arrangement.SpaceAround,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = "12.11",
+                                            style = TextStyle(
+                                                color = colorResource(id = R.color.black),
+                                                fontSize = 18.sp,
+                                                textAlign = TextAlign.Right
+                                            )
+                                        )
+                                        Text(
+                                            text = "  MB/S",
+                                            style = TextStyle(
+                                                color = colorResource(id = R.color.text_color_dark_gray),
+                                                fontSize = 12.sp,
+                                                fontWeight = FontWeight.Medium
+                                            )
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(20.dp)
+                            .padding(top = 0.dp)
+                            .height(114.dp)
+                            .border(
+                                border = BorderStroke(2.dp, Color.White),
+                                shape = RoundedCornerShape(28.dp)
+                            )
+                            .background(
+                                shape = RoundedCornerShape(28.dp),
+                                color = Color.White
+                            ),
+//            contentAlignment = Alignment.TopCenter,
+                    ) {
+                        AddRowSmart(navHostController)
+                        Button(
+                            onClick = {
+                                Log.d("test_button", "onClick Smart Connect")
+                                navHostController.navigate(
+                                    BottomBarScreen.Settings.route
+                                )
+                                BottomBarScreen.Settings.isTrue = true
+
+                            },
+                            modifier = Modifier
+                                .padding(start = 14.dp, end = 14.dp, bottom = 12.dp, top = 16.dp)
+                                .align(Alignment.BottomCenter)
+                                .background(colorResource(id = R.color.transparent))
+                                .fillMaxWidth()
+                                .height(35.dp),
+                            shape = RoundedCornerShape(16.dp),
+                            colors = ButtonDefaults.buttonColors(
+                                contentColor = colorResource(id = R.color.white),
+                                containerColor = colorResource(id = R.color.blue_text),
+                            ),
+                        ) {
+                            Text(
+                                text = "Smart Connect",
+                                fontSize = 14.sp,
+                                fontWeight = FontWeight.Medium,
+                                fontStyle = FontStyle.Normal,
+                                modifier = Modifier.background(Color.Transparent)
+                            )
+                        }
+                    }
+                }
+
+                /* Select Server Box*/
+                if (!isConnect) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(20.dp)
+                            .padding(bottom = 0.dp)
+                            .height(70.dp)
+                            .border(
+                                border = BorderStroke(2.dp, Color.White),
+                                shape = RoundedCornerShape(28.dp)
+                            )
+                            .background(
+                                shape = RoundedCornerShape(28.dp),
+                                color = Color.White
+                            ),
+                        contentAlignment = Alignment.CenterStart,
+                    ) {
+                        AddRowSelectServer(navHostController)
+                    }
+                }
+            }
+        }
+
+    }
+
+}
+
+@Composable
+fun ColumnScope.ColumnText(text: String, color: Color, size: TextUnit) {
+    Surface(
+        modifier = Modifier.padding(start = 0.dp),
+        color = Color.Transparent
+    ) {
+        Text(text = text,
+            style = TextStyle(
+                color = color,
+                fontSize = size,
+                fontStyle = FontStyle.Normal,
+                fontWeight = FontWeight.Medium
+            ),
+            maxLines = 1,
+            modifier = Modifier
+                .padding(start = 0.dp, end = 0.dp)
+                .weight(1f)
+        )
+    }
+}
+
+@Composable
+fun BoxScope.AddRowSmart(navHostController: NavHostController) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(15.dp)
+            .background(Color.Transparent),
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.dubai3x),
+                contentDescription = "Country Logo",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(40.dp)
+                    .weight(1f)
+            )
+        }
+        Column(
+            modifier = Modifier
+                .padding(start = 12.dp)
+        ) {
+            ColumnText(
+                text = "Fastest Location",
+                color = colorResource(id = R.color.blue_text),
+                size = 12.sp
+            )
+            ColumnText(
+                text = "United Arab Emirates",
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                size = 16.sp
+            )
+        }
+        Spacer(modifier = Modifier.weight(1F))
+        Surface(
+            modifier = Modifier.padding(start = 15.dp),
+            color = Color.Transparent
+        ) {
+            ClickableText(
+                text = AnnotatedString("Change"),
+                style = TextStyle(
+                    color = colorResource(id = R.color.light_blue_2),
+                    fontSize = 14.sp,
+                    textAlign = TextAlign.Right
+                ),
+                onClick = {
+                    navHostController.navigate(
+                        Screen.ServerList.route
+                    )
+                    Screen.ServerList.isTrue = false
+                    Log.d("button_click_change", "Pressed")
+                },
+                )
+        }
+    }
+}
+
+@Composable
+fun BoxScope.AddRowSelectServer(navHostController: NavHostController) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(15.dp)
+            .background(Color.Transparent)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    navHostController.navigate(
+                        Screen.ServerList.route
+                    )
+                    Screen.ServerList.isTrue = true
+                    Log.d("button_click_change", "Pressed")
+                }
+            }
+//            .clickable {
+//                Log.d("test_server_button", "ServerTab Clicked")
+//            }
+        ,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.worldmap3x),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(40.dp)
+                    .weight(1f)
+            )
+        }
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = "See All Locations",
+                style = TextStyle(
+                    color = colorResource(id = R.color.dark_blue_gray_text),
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 12.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1F))
+        Surface(
+            modifier = Modifier.padding(start = 15.dp),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 5.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f)
+            )
+        }
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddText(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        style = TextStyle(
+            fontSize = size,
+            color = color,
+            textAlign = TextAlign.Center,
+            fontStyle = FontStyle.Normal,
+            fontWeight = FontWeight.Medium
+        )
+    )
+}
+
+@Composable
+fun RowScope.AddText(text: String, size: TextUnit, color: Color) {
+    Text(
+        text = text,
+        style = TextStyle(
+            fontSize = size,
+            color = color,
+            textAlign = TextAlign.Center,
+            fontStyle = FontStyle.Normal,
+            fontWeight = FontWeight.Medium
+        )
+    )
+}
+
+@Composable
+fun pinkBackground(): Painter{
+    return painterResource(id = R.drawable.pinkbackground3x) 
+}
+
+@Composable
+fun blueBackground(): Painter{
+    return painterResource(id = R.drawable.bluebackground3x)
+}
+
+@Preview(showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Composable
+fun HomePreview() {
+    Home(rememberNavController())
+}
+
+@Preview(showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun HomePreviewDark() {
+    Home(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/SettingsScreen.kt

@@ -0,0 +1,848 @@
+package com.vpn.fastestvpnservice.screens.bottomNavBarScreens
+
+import android.accessibilityservice.GestureDescription
+import android.app.Activity
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.indication
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.CallSplit
+import androidx.compose.material.icons.filled.Block
+import androidx.compose.material.icons.filled.CallSplit
+import androidx.compose.material.icons.filled.Circle
+import androidx.compose.material.icons.filled.DarkMode
+import androidx.compose.material.icons.filled.FlashOff
+import androidx.compose.material.icons.filled.HdrAuto
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material.icons.filled.Security
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.filled.SmartDisplay
+import androidx.compose.material.icons.filled.SwitchRight
+import androidx.compose.material.icons.outlined.Circle
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchColors
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.isDarkTheme
+import com.vpn.fastestvpnservice.beans.selectedtheme
+import com.vpn.fastestvpnservice.beans.themesList
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun Settings(navHostController: NavHostController) {
+
+    Box(modifier = Modifier
+        .background(MaterialTheme.colorScheme.background)
+        .fillMaxSize(),
+//        contentAlignment = Alignment.Center
+    ) {
+//        val view = LocalView.current
+//        val window = (view.context as Activity).window
+//        window.statusBarColor = colorResource(id = R.color.background_color_gray2).toArgb()
+
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(start = 16.dp, end = 24.dp)
+                .fillMaxSize()
+        ) {
+            if (BottomBarScreen.Settings.isTrue) {
+                AddRowSettingsSmart(
+                    icon = R.drawable.smart_connect3x,
+                    text = "Smart Connect",
+                    isRowShown = false,
+                    isSheetShown = true
+                )
+            }
+
+            Spacer(modifier = Modifier.height(60.dp))
+            AddTextSettings(
+                text = "Settings",
+                size = 28.sp,
+                color = MaterialTheme.colorScheme.primary
+            )
+            AddRowSettingsColumn(
+                icon = R.drawable.vpn_protocols3x,
+                text = "VPN Protocols",
+                desc = "WireGuard"
+            )
+            AddRowSwitch(
+                icon = R.drawable.autoconnect3x,
+                text = "Auto Connect"
+            )
+            AddRowSettingsSmart(
+                icon = R.drawable.smart_connect3x,
+                text = "Smart Connect",
+                isRowShown = true,
+                isSheetShown = false
+            )
+            AddRowSwitch(
+                icon = R.drawable.adblock3x,
+                text = "AdBlock"
+            )
+            AddRowSwitch(
+                icon = R.drawable.kill_switch3x,
+                text = "Kill Switch"
+            )
+            AddRowSettings(
+                icon = R.drawable.split_tunneling3x,
+                text = "Split Tunneling",
+                onClick = { navHostController.navigate(Screen.SplitTunneling.route) }
+            )
+            AddRowSettings(
+                icon = R.drawable.notification3x,
+                text = "Notifications",
+                onClick = { navHostController.navigate(Screen.Notifications.route) }
+            )
+            AddRowDarkLightTheme(
+                icon = Icons.Default.DarkMode,
+                text = "Theme")
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowSwitch(icon: Int, text: String) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .height(30.dp),
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp, end = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            var isSwitch by remember { mutableStateOf(false) }
+            Switch(
+                checked = isSwitch,
+                onCheckedChange = {
+                    isSwitch = it
+                },
+                modifier = Modifier.scale(0.8F),
+                colors = SwitchDefaults.colors(
+                    checkedThumbColor = Color.White,
+                    checkedTrackColor = colorResource(id = R.color.switch_green),
+                    uncheckedThumbColor = Color.White,
+                    uncheckedTrackColor = colorResource(id = R.color.switch_gray),
+                    uncheckedBorderColor = colorResource(id = R.color.switch_gray)
+                ),
+                thumbContent = {
+
+                }
+            )
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowSettings(
+    icon: Int,
+    text: String,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .height(30.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    onClick()
+                }
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 20.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary
+                )
+            )
+        }
+
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ColumnScope.AddRowSettingsColumn(
+    icon: Int,
+    text: String,
+    desc: String
+) {
+    var isSheetOpen by remember { mutableStateOf(false) }
+    val sheetState = rememberModalBottomSheetState()
+    val protocols = listOf<String>(
+        "Auto", "WireGuard", "IKEv2", "OpenVPN TCP", "OpenVPN UDP"
+    )
+    var selectedProtocol by remember { mutableStateOf(protocols[1]) }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .height(40.dp)
+//            .clickable { isSheetOpen = true }
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    isSheetOpen = true
+                }
+            }
+        ,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Column {
+                Text(text = text,
+                    style = TextStyle(
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 16.sp,
+                        fontStyle = FontStyle.Normal,
+                        fontWeight = FontWeight.Medium
+                    ),
+                    maxLines = 1,
+                    modifier = Modifier
+                        .padding(start = 20.dp, end = 0.dp)
+                        .weight(1f)
+                )
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(text = selectedProtocol,
+                    style = TextStyle(
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 12.sp,
+                        fontStyle = FontStyle.Normal,
+                        fontWeight = FontWeight.Medium
+                    ),
+                    maxLines = 1,
+                    modifier = Modifier
+                        .padding(start = 20.dp, end = 0.dp)
+                        .weight(1f)
+                        .alpha(0.6F),
+                )
+            }
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 20.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary
+                )
+            )
+        }
+
+        if (isSheetOpen) {
+            ModalBottomSheet(
+                onDismissRequest = { isSheetOpen = false },
+                sheetState = sheetState,
+                containerColor = MaterialTheme.colorScheme.background
+            ) {
+                Box(modifier = Modifier
+                    .background(Color.Transparent)
+                    .fillMaxWidth()
+                    .height(340.dp)
+                    .padding(start = 0.dp, top = 5.dp),
+                    ) {
+                    Column(
+                        verticalArrangement = Arrangement.Top,
+                        horizontalAlignment = Alignment.Start
+                    ) {
+                        AddTextSettings(
+                            text = "VPN Protocols",
+                            size = 18.sp,
+                            color = MaterialTheme.colorScheme.primary,
+                            bottomPadding = 15.dp,
+                            startPadding = 16.dp
+                        )
+                        protocols.forEach { protocol ->
+                            Row(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .background(Color.Transparent)
+                                    .padding(start = 2.dp)
+//                                    .selectable(
+//                                        selected = selectedProtocol == protocol,
+//                                        onClick = {
+//                                            selectedProtocol = protocol
+//                                        },
+//                                    )
+//                                    .indication(
+//                                        indication = null,
+//                                        interactionSource = remember {
+//                                            MutableInteractionSource()
+//                                        }
+//                                    )
+                                ,
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                RadioButton(selected = protocol == selectedProtocol,
+                                    onClick = {
+                                        selectedProtocol = protocol
+                                    },
+                                    colors = RadioButtonDefaults.colors(
+                                        selectedColor = colorResource(id = R.color.radio_button_blue),
+                                        unselectedColor = colorResource(id = R.color.gray_icon),)
+                                    )
+                                Text(text = protocol,
+                                    modifier = Modifier.padding(start = 12.dp),
+                                    style = TextStyle(
+                                        fontSize = 14.sp,
+                                        color = MaterialTheme.colorScheme.primary
+                                    )
+                                    )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddRowDarkLightTheme(
+    icon: ImageVector,
+    text: String,
+) {
+    var isThemeSheetOpen by remember { mutableStateOf(false) }
+    val sheetState = rememberModalBottomSheetState()
+
+//    var selectedtheme by remember {
+//        mutableStateOf(themesList[0]) }
+
+    val isSystemInDarkTheme = isSystemInDarkTheme()
+    val systemTheme by remember { mutableStateOf(isSystemInDarkTheme) }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 33.dp)
+            .background(Color.Transparent)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    isThemeSheetOpen = true
+                }
+            }
+            .height(30.dp),
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                imageVector = icon,
+                contentDescription = "Select Theme",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary)                )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                style = TextStyle(
+                    color = MaterialTheme.colorScheme.primary,
+                    fontSize = 16.sp,
+                    fontStyle = FontStyle.Normal,
+                    fontWeight = FontWeight.Medium
+                ),
+                maxLines = 1,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 20.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(
+                    MaterialTheme.colorScheme.primary
+                )
+            )
+        }
+
+    }
+
+    if (isThemeSheetOpen) {
+        ModalBottomSheet(
+            onDismissRequest = { isThemeSheetOpen = false
+            },
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.background
+        ) {
+            Box(modifier = Modifier
+                .background(Color.Transparent)
+                .fillMaxWidth()
+                .height(250.dp)
+                .padding(start = 0.dp, top = 10.dp),
+            ) {
+
+                Log.d("test_theme", "systemTheme -> $systemTheme")
+
+                Column(
+                    verticalArrangement = Arrangement.Top,
+                    horizontalAlignment = Alignment.Start
+                ) {
+                    AddTextSettings(
+                        text = "Theme",
+                        size = 18.sp,
+                        color = MaterialTheme.colorScheme.primary,
+                        bottomPadding = 20.dp,
+                        startPadding = 16.dp
+                    )
+                    themesList.forEach { theme ->
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .background(Color.Transparent)
+                                .padding(start = 2.dp)
+//                                    .selectable(
+//                                        selected = selectedProtocol == protocol,
+//                                        onClick = {
+//                                            selectedProtocol = protocol
+//                                        },
+//                                    )
+//                                    .indication(
+//                                        indication = null,
+//                                        interactionSource = remember {
+//                                            MutableInteractionSource()
+//                                        }
+//                                    )
+                            ,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+//                            val themeState = isSystemInDarkTheme()
+//                            val isSystemInDarkTheme by remember { mutableStateOf(themeState) }
+                            RadioButton(selected = theme == selectedtheme.value,
+                                onClick = {
+                                    selectedtheme.value = theme
+
+                                    if (selectedtheme.value == themesList[0])
+                                    {
+                                        Log.d("test_theme", "true: -> $systemTheme")
+                                        isDarkTheme.value = systemTheme
+                                    }
+                                    else {
+                                        Log.d("test_theme", "false: -> $systemTheme")
+                                        isDarkTheme.value = selectedtheme.value == themesList[2]
+                                    }
+
+                                },
+                                colors = RadioButtonDefaults.colors(
+                                    selectedColor = colorResource(id = R.color.radio_button_blue),
+                                    unselectedColor = colorResource(id = R.color.gray_icon),)
+                            )
+                            Text(text = theme,
+                                modifier = Modifier.padding(start = 12.dp),
+                                style = TextStyle(
+                                    fontSize = 14.sp,
+                                    color = MaterialTheme.colorScheme.primary
+                                )
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ColumnScope.AddRowSettingsSmart(
+    icon: Int,
+    text: String,
+    isRowShown: Boolean,
+    isSheetShown: Boolean
+) {
+    var isSmartSheetOpen by remember { mutableStateOf(isSheetShown) }
+    val sheetState = rememberModalBottomSheetState()
+    val smartConnect = listOf<String>(
+        "Recommended", "Recently", "Any Specific"
+    )
+    var selectedSmartConnect by remember {
+        mutableStateOf(smartConnect[0]) }
+
+    if (isRowShown) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 33.dp)
+                .background(Color.Transparent)
+                .pointerInput(Unit) {
+                    detectTapGestures {
+                        isSmartSheetOpen = true
+                    }
+                }
+                .height(30.dp),
+            horizontalArrangement = Arrangement.Start,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+
+            Surface(
+                modifier = Modifier.padding(start = 0.dp),
+                color = Color.Transparent
+            ) {
+                Image(
+                    painter = painterResource(id = icon),
+                    contentDescription = "World",
+                    modifier = Modifier
+                        .padding(start = 0.dp)
+                        .size(24.dp)
+                        .weight(1f),
+                    colorFilter = ColorFilter.tint(
+                        MaterialTheme.colorScheme.primary)                )
+            }
+
+            Surface(
+                modifier = Modifier.padding(start = 0.dp),
+                color = Color.Transparent
+            ) {
+                Text(text = text,
+                    style = TextStyle(
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 16.sp,
+                        fontStyle = FontStyle.Normal,
+                        fontWeight = FontWeight.Medium
+                    ),
+                    maxLines = 1,
+                    modifier = Modifier
+                        .padding(start = 20.dp, end = 0.dp)
+                        .weight(1f)
+                )
+            }
+            Spacer(modifier = Modifier.weight(1f))
+
+            Surface(
+                modifier = Modifier
+                    .padding(start = 15.dp)
+                    .align(Alignment.CenterVertically),
+                color = Color.Transparent
+
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.frontarrow3x),
+                    contentDescription = "Front_Arrow",
+                    modifier = Modifier
+                        .padding(start = 0.dp, end = 20.dp)
+                        .size(10.dp, 18.dp)
+                        .weight(1f),
+                    colorFilter = ColorFilter.tint(
+                        MaterialTheme.colorScheme.primary
+                    )
+                )
+            }
+
+        }
+    }
+
+    if (isSmartSheetOpen) {
+        ModalBottomSheet(
+            onDismissRequest = { isSmartSheetOpen = false
+                BottomBarScreen.Settings.isTrue = false
+                               },
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.background
+        ) {
+            Box(modifier = Modifier
+                .background(Color.Transparent)
+                .fillMaxWidth()
+                .height(250.dp)
+                .padding(start = 0.dp, top = 10.dp),
+            ) {
+                Column(
+                    verticalArrangement = Arrangement.Top,
+                    horizontalAlignment = Alignment.Start
+                ) {
+                    AddTextSettings(
+                        text = "Smart Connect",
+                        size = 18.sp,
+                        color = MaterialTheme.colorScheme.primary,
+                        bottomPadding = 20.dp,
+                        startPadding = 16.dp
+                    )
+                    smartConnect.forEach { smart ->
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .background(Color.Transparent)
+                                .padding(start = 2.dp)
+//                                    .selectable(
+//                                        selected = selectedProtocol == protocol,
+//                                        onClick = {
+//                                            selectedProtocol = protocol
+//                                        },
+//                                    )
+//                                    .indication(
+//                                        indication = null,
+//                                        interactionSource = remember {
+//                                            MutableInteractionSource()
+//                                        }
+//                                    )
+                            ,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            RadioButton(selected = smart == selectedSmartConnect,
+                                onClick = {
+                                    selectedSmartConnect = smart
+                                },
+                                colors = RadioButtonDefaults.colors(
+                                    selectedColor = colorResource(id = R.color.radio_button_blue),
+                                    unselectedColor = colorResource(id = R.color.gray_icon),)
+                            )
+                            Text(text = smart,
+                                modifier = Modifier.padding(start = 12.dp),
+                                style = TextStyle(
+                                    fontSize = 14.sp,
+                                    color = MaterialTheme.colorScheme.primary
+                                )
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddTextSettings(
+    text: String,
+    size: TextUnit,
+    color: Color,
+    bottomPadding: Dp = 0.dp,
+    startPadding: Dp = 0.dp
+) {
+    Text(
+        text = text,
+        style = TextStyle(
+            fontSize = size,
+            color = color,
+            textAlign = TextAlign.Center,
+            fontStyle = FontStyle.Normal,
+            fontWeight = FontWeight.Medium,
+        ),
+        modifier = Modifier.padding(bottom = bottomPadding, start = startPadding)
+
+    )
+}
+
+@Preview
+@Composable
+fun SettingsPreview() {
+    Settings(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/helpScreensAll/AboutScreen.kt

@@ -0,0 +1,212 @@
+package com.vpn.fastestvpnservice.screens.helpScreensAll
+
+import android.graphics.Bitmap
+import android.util.Log
+import android.view.ViewGroup
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Button
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.constants.TermsAndConditionsDesc
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@Composable
+fun About(navHostController: NavHostController) {
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                colorResource(id = R.color.white)
+            )
+            .fillMaxSize()
+    ) {
+        var showLoader by remember { mutableStateOf(true) }
+
+            ShowHeaderAbout(navHostController = navHostController)
+
+            Box(modifier = Modifier
+                .padding(top = 60.dp)
+                .fillMaxSize()
+                .background(Color.Transparent)
+            ) {
+
+                val aboutUrl = "https://fastestvpn.com/about?device=ios"
+                AndroidView(factory = {
+                    WebView(it).apply {
+                        layoutParams = ViewGroup.LayoutParams(
+                            ViewGroup.LayoutParams.MATCH_PARENT,
+                            ViewGroup.LayoutParams.MATCH_PARENT
+                        )
+                        webViewClient = WebViewClient()
+
+                    settings.javaScriptEnabled = true
+
+                        webViewClient = object : WebViewClient() {
+                            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                                super.onPageStarted(view, url, favicon)
+                                Log.d("test_webview", "onPageStarted")
+                                showLoader = true
+                            }
+
+                            override fun onPageFinished(view: WebView?, url: String?) {
+                                super.onPageFinished(view, url)
+                                Log.d("test_webview", "onPageFinished")
+                                showLoader = false
+                            }
+                        }
+
+//                        loadUrl(aboutUrl)
+                    }
+                },
+                    update = {
+                        Log.d("test_webview", "update")
+                        it.loadUrl(aboutUrl)
+                    }
+                )
+
+                if (showLoader) {
+                    var progress by remember { mutableFloatStateOf(0.1F) }
+
+                    LaunchedEffect(key1 = Unit) {
+                        for (i in 1..100) {
+                            progress = i.toFloat()/100F
+                            delay(50)
+                        }
+                    }
+
+                    CircularProgressIndicator(
+                        progress = progress,
+                        modifier = Modifier
+                            .align(Alignment.Center)
+                            .size(50.dp),
+                        colorResource(id = R.color.dark_blue_gray_text),
+                        strokeWidth = 5.dp,
+                    )
+                }
+            }
+    }
+}
+
+@Composable
+fun BoxScope.ShowHeaderAbout(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 10.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = colorResource(id = R.color.dark_blue_gray_text),
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "About Fastest VPN",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+
+//    Column(
+//        modifier = Modifier
+//            .fillMaxWidth()
+//            .fillMaxHeight()
+//            .padding(top = 100.dp)
+//            .padding(16.dp)
+//            .background(Color.Transparent)
+//            .verticalScroll(rememberScrollState())
+//    ) {
+//        Text(text = TermsAndConditionsDesc,
+//            style = TextStyle(
+//                fontSize = 14.sp,
+//                lineHeight = 26.sp,
+//                color = MaterialTheme.colorScheme.primary
+//            )
+//        )
+//    }
+}
+
+@Preview
+@Composable
+fun AboutPreview() {
+    About(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/helpScreensAll/CustomerSupportScreen.kt

@@ -0,0 +1,201 @@
+package com.vpn.fastestvpnservice.screens.helpScreensAll
+
+import android.annotation.SuppressLint
+import android.graphics.Bitmap
+import android.util.Log
+import android.view.ViewGroup
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import kotlinx.coroutines.delay
+
+@SuppressLint("SetJavaScriptEnabled")
+@Composable
+fun CustomerSupport(navHostController: NavHostController) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                colorResource(id = R.color.white)
+            )
+            .fillMaxSize()
+    ) {
+        var showLoader by remember { mutableStateOf(true) }
+
+        ShowHeaderCS(navHostController = navHostController)
+
+        Box(modifier = Modifier
+            .padding(top = 60.dp, bottom = 0.dp)
+            .fillMaxSize()
+            .background(Color.Transparent)
+        ) {
+
+            val email = "sagartestaccount@gmail.com"
+            val supportUrl = "https://api.fastestvpn.com/v2/chat?device=ios&email=$email"
+            AndroidView(factory = {
+                WebView(it).apply {
+                    layoutParams = ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT
+                    )
+                    webViewClient = WebViewClient()
+
+                    settings.javaScriptEnabled = true
+                    settings.allowContentAccess = true
+                    settings.allowFileAccess = true
+                    settings.allowFileAccessFromFileURLs = true
+                    settings.allowUniversalAccessFromFileURLs = true
+                    settings.databaseEnabled = true
+                    settings.domStorageEnabled = true
+                    settings.loadsImagesAutomatically = true
+                    settings.builtInZoomControls = true
+                    settings.displayZoomControls = true
+                    settings.mediaPlaybackRequiresUserGesture = true
+
+                    webViewClient = object : WebViewClient() {
+                        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                            super.onPageStarted(view, url, favicon)
+                            Log.d("test_webview", "onPageStarted")
+                            showLoader = true
+                        }
+
+                        override fun onPageFinished(view: WebView?, url: String?) {
+                            super.onPageFinished(view, url)
+                            Log.d("test_webview", "onPageFinished")
+                            showLoader = false
+                        }
+                    }
+
+//                        loadUrl(supportUrl)
+                }
+            },
+                update = {
+                    Log.d("test_webview", "update")
+                    it.loadUrl(supportUrl)
+                }
+            )
+
+            if (showLoader) {
+
+                var progress by remember { mutableFloatStateOf(0.1F) }
+
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(50)
+                    }
+                }
+
+                CircularProgressIndicator(
+                    progress = progress,
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    strokeWidth = 5.dp,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun BoxScope.ShowHeaderCS(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 10.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = colorResource(id = R.color.dark_blue_gray_text),
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Customer Support",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+
+//    Column(
+//        modifier = Modifier
+//            .fillMaxWidth()
+//            .fillMaxHeight()
+//            .padding(top = 100.dp)
+//            .padding(16.dp)
+//            .background(Color.Transparent)
+//            .verticalScroll(rememberScrollState())
+//    ) {
+//        Text(text = TermsAndConditionsDesc,
+//            style = TextStyle(
+//                fontSize = 14.sp,
+//                lineHeight = 26.sp,
+//                color = MaterialTheme.colorScheme.primary
+//            )
+//        )
+//    }
+}
+
+@Preview
+@Composable
+fun CustomerSupportPreview() {
+    CustomerSupport(navHostController = rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/helpScreensAll/FAQScreen.kt

@@ -0,0 +1,331 @@
+package com.vpn.fastestvpnservice.screens.helpScreensAll
+
+import android.annotation.SuppressLint
+import android.graphics.Bitmap
+import android.util.Log
+import android.view.ViewGroup
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Card
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Shapes
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.constants.HelpDesc
+import com.vpn.fastestvpnservice.constants.HelpTitles
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import kotlinx.coroutines.delay
+
+@Composable
+@SuppressLint("SetJavaScriptEnabled")
+fun FAQ(navHostController: NavHostController) {
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                colorResource(id = R.color.webview_background)
+            )
+            .fillMaxSize()
+    ) {
+        var showLoader by remember { mutableStateOf(true) }
+        ShowExpandList(navHostController = navHostController)
+
+        Box(modifier = Modifier
+            .padding(top = 60.dp)
+            .fillMaxSize()
+            .background(Color.Transparent)
+        ) {
+
+            val faqUrl = "https://fastestvpn.com/faq?device=ios"
+            AndroidView(factory = {
+                WebView(it).apply {
+                    layoutParams = ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT
+                    )
+                    webViewClient = WebViewClient()
+
+                    settings.javaScriptEnabled = true
+
+                    webViewClient = object : WebViewClient() {
+                        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                            super.onPageStarted(view, url, favicon)
+                            Log.d("test_webview", "onPageStarted")
+                            showLoader = true
+                        }
+
+                        override fun onPageFinished(view: WebView?, url: String?) {
+                            super.onPageFinished(view, url)
+                            Log.d("test_webview", "onPageFinished")
+                            showLoader = false
+                        }
+                    }
+
+//                    loadUrl(faqUrl)
+                }
+            },
+                update = {
+                    it.loadUrl(faqUrl)
+                }
+            )
+
+            if (showLoader) {
+                var progress by remember { mutableFloatStateOf(0.1F) }
+
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(25)
+                    }
+                }
+
+                CircularProgressIndicator(
+                    progress = progress,
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    strokeWidth = 5.dp,
+                )
+            }
+
+        }
+    }
+
+
+
+}
+
+@Composable
+fun BoxScope.ShowExpandList(
+    navHostController: NavHostController
+) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 10.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = colorResource(id = R.color.dark_blue_gray_text),
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "FAQ",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+
+//    Spacer(modifier = Modifier.height(0.dp))
+//
+//    Column(
+//        modifier = Modifier
+//            .fillMaxWidth()
+//            .padding(top = 100.dp)
+//            .padding(16.dp)
+//            .verticalScroll(rememberScrollState())
+//    ) {
+//        for (title in HelpTitles) {
+//            ExpandableCard(title)
+//            Spacer(modifier = Modifier.height(10.dp))
+//        }
+//    }
+}
+
+@Composable
+fun ExpandableCard(title: String) {
+    var isExpanded by remember { mutableStateOf(false) }
+    val rotationState by animateFloatAsState(
+        targetValue = if (isExpanded) 180f else 0f,
+        label = if (isExpanded) "Show Less" else "Show More")
+
+    Card(
+        modifier = Modifier
+            .padding(0.dp)
+//            .background(Color.Transparent, shape = RoundedCornerShape(0.dp))
+            .fillMaxWidth()
+            .animateContentSize(
+                animationSpec = tween(
+                    durationMillis = 300,
+                    easing = LinearOutSlowInEasing
+                )
+            )
+            .border(
+                border = BorderStroke(
+                    0.dp,
+                    MaterialTheme.colorScheme.background
+                )
+            ),
+            backgroundColor = MaterialTheme.colorScheme.background,
+    ) {
+        Column(
+            modifier = Modifier
+                .padding(0.dp)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(Color.Transparent)
+                    .padding(vertical = 15.dp)
+                    .pointerInput(Unit) {
+                        detectTapGestures {
+                            isExpanded = !isExpanded
+
+                        }
+                    }
+            ) {
+                Text(text = title,
+                    style = TextStyle(
+                        fontSize = 16.sp,
+                        lineHeight = 26.sp,
+                        fontWeight = FontWeight.Medium,
+                        color = MaterialTheme.colorScheme.primary
+                    ),
+                    modifier = Modifier
+                        .weight(6F)
+                        .background(Color.Transparent)
+                )
+                IconButton(onClick = {
+                    isExpanded = !isExpanded
+                },
+                    modifier = Modifier
+                        .weight(1F)
+                        .background(Color.Transparent)
+                        .rotate(rotationState)
+                        .size(12.dp, 7.dp)
+                ) {
+                    Icon(
+                        painter = painterResource(
+                            id = R.drawable.downarrow3x),
+                        contentDescription = "Arrow-DropDown",
+                        tint = MaterialTheme.colorScheme.primary
+                    )
+
+                }
+            }
+
+            if (isExpanded) {
+                Text(
+                    text = HelpDesc,
+                    style = TextStyle(
+                        fontSize = 14.sp,
+                        lineHeight = 26.sp,
+                        color = MaterialTheme.colorScheme.primary
+                    ),
+                    modifier = Modifier
+                        .padding(vertical = 0.dp)
+                        .alpha(0.6F)
+                        .padding(top = 15.dp, bottom = 30.dp)
+                    
+                    )
+            }
+
+            Surface(
+                modifier = Modifier
+                    .height(1.dp)
+                    .fillMaxWidth()
+                    .alpha(0.6F),
+                color = MaterialTheme.colorScheme.secondary
+            ) {}
+        }
+    }
+}
+
+@Preview
+@Composable
+fun FAQPreview() {
+    FAQ(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/helpScreensAll/PrivacyPolicyScreen.kt

@@ -0,0 +1,208 @@
+package com.vpn.fastestvpnservice.screens.helpScreensAll
+
+import android.graphics.Bitmap
+import android.util.Log
+import android.view.ViewGroup
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.constants.PrivacyPolicyDesc
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import kotlinx.coroutines.delay
+
+@Composable
+fun PrivacyPolicy(navHostController: NavHostController){
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                colorResource(id = R.color.white)
+            )
+            .fillMaxSize()
+    ) {
+        var showLoader by remember { mutableStateOf(true) }
+
+        ShowHeaderPP(navHostController = navHostController)
+
+        Box(modifier = Modifier
+            .padding(top = 60.dp)
+            .fillMaxSize()
+            .background(Color.Transparent)
+        ) {
+
+
+            val privacyUrl = "https://fastestvpn.com/privacy-policy?device=ios"
+            AndroidView(factory = {
+                WebView(it).apply {
+                    layoutParams = ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT
+                    )
+                    webViewClient = WebViewClient()
+
+                    settings.javaScriptEnabled = true
+
+                    webViewClient = object : WebViewClient() {
+                        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                            super.onPageStarted(view, url, favicon)
+                            Log.d("test_webview", "onPageStarted")
+                            showLoader = true
+                        }
+
+                        override fun onPageFinished(view: WebView?, url: String?) {
+                            super.onPageFinished(view, url)
+                            Log.d("test_webview", "onPageFinished")
+                            showLoader = false
+                        }
+                    }
+
+//                    loadUrl(privacyUrl)
+                }
+            },
+                update = {
+                    it.loadUrl(privacyUrl)
+                }
+            )
+
+            if (showLoader) {
+                var progress by remember { mutableFloatStateOf(0.1F) }
+
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(25)
+                    }
+                }
+
+                CircularProgressIndicator(
+                    progress = progress,
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    strokeWidth = 5.dp,
+                )
+            }
+
+        }
+    }
+
+}
+
+@Composable
+fun BoxScope.ShowHeaderPP(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 10.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = colorResource(id = R.color.dark_blue_gray_text),
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Privacy Policy",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+@Composable
+fun BoxScope.ShowDataPP() {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+            .padding(top = 100.dp)
+            .padding(16.dp)
+            .background(Color.Transparent)
+            .verticalScroll(rememberScrollState())
+    ) {
+        Text(text = PrivacyPolicyDesc,
+            style = TextStyle(
+                fontSize = 14.sp,
+                lineHeight = 26.sp,
+                color = MaterialTheme.colorScheme.primary
+            )
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PrivacyPolicyPreview() {
+    PrivacyPolicy(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/helpScreensAll/TermsAndConditionsScreen.kt

@@ -0,0 +1,207 @@
+package com.vpn.fastestvpnservice.screens.helpScreensAll
+
+import android.graphics.Bitmap
+import android.util.Log
+import android.view.ViewGroup
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.constants.PrivacyPolicyDesc
+import com.vpn.fastestvpnservice.constants.TermsAndConditionsDesc
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.sealedClass.Screen
+import kotlinx.coroutines.delay
+
+@Composable
+fun TermsAndConditions(navHostController: NavHostController) {
+    val configuration = LocalConfiguration.current
+    val screenHeight = configuration.screenHeightDp.dp
+    val screenWidth = configuration.screenWidthDp.dp
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(
+                colorResource(id = R.color.white)
+            )
+            .fillMaxSize()
+    ) {
+        var showLoader by remember { mutableStateOf(true) }
+
+        ShowHeaderTnC(navHostController = navHostController)
+
+        Box(modifier = Modifier
+            .padding(top = 60.dp)
+            .fillMaxSize()
+            .background(Color.Transparent)
+        ) {
+
+            val tncUrl = "https://fastestvpn.com/terms-of-service?device=ios"
+            AndroidView(factory = {
+                WebView(it).apply {
+                    layoutParams = ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        ViewGroup.LayoutParams.MATCH_PARENT
+                    )
+                    webViewClient = WebViewClient()
+
+                    settings.javaScriptEnabled = true
+
+                    webViewClient = object : WebViewClient() {
+                        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                            super.onPageStarted(view, url, favicon)
+                            Log.d("test_webview", "onPageStarted")
+                            showLoader = true
+                        }
+
+                        override fun onPageFinished(view: WebView?, url: String?) {
+                            super.onPageFinished(view, url)
+                            Log.d("test_webview", "onPageFinished")
+                            showLoader = false
+                        }
+                    }
+
+//                    loadUrl(tncUrl)
+                }
+            },
+                update = {
+                    it.loadUrl(tncUrl)
+                }
+            )
+
+            if (showLoader) {
+                var progress by remember { mutableFloatStateOf(0.1F) }
+
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(25)
+                    }
+                }
+
+                CircularProgressIndicator(
+                    progress = progress,
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    colorResource(id = R.color.dark_blue_gray_text),
+                    strokeWidth = 5.dp,
+                )
+            }
+
+        }
+    }
+}
+
+@Composable
+fun BoxScope.ShowHeaderTnC(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 10.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = colorResource(id = R.color.dark_blue_gray_text),
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Terms and Conditions",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = colorResource(id = R.color.dark_blue_gray_text),
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+
+
+//    Column(
+//        modifier = Modifier
+//            .fillMaxWidth()
+//            .fillMaxHeight()
+//            .padding(top = 100.dp)
+//            .padding(16.dp)
+//            .background(Color.Transparent)
+//            .verticalScroll(rememberScrollState())
+//    ) {
+//        Text(text = TermsAndConditionsDesc,
+//            style = TextStyle(
+//                fontSize = 14.sp,
+//                lineHeight = 26.sp,
+//                color = MaterialTheme.colorScheme.primary
+//            )
+//        )
+//    }
+}
+
+@Preview
+@Composable
+fun TermsAndConditionsPreview() {
+    TermsAndConditions(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/settingsScreenAll/NotificationsScreen.kt

@@ -0,0 +1,93 @@
+package com.vpn.fastestvpnservice.screens.settingsScreenAll
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+
+@Composable
+fun Notifications(navHostController: NavHostController) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                color = MaterialTheme.colorScheme.background
+            )
+    ) {
+        HeaderRowNS(navHostController = navHostController)
+    }
+}
+
+@Composable
+fun BoxScope.HeaderRowNS(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 50.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 50.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Notifications",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+@Preview
+@Composable
+fun NotificationsPreview() {
+    Notifications(rememberNavController())
+}

app/src/main/java/com/vpn/fastestvpnservice/screens/settingsScreenAll/SplitTunneling.kt

@@ -0,0 +1,249 @@
+package com.vpn.fastestvpnservice.screens.settingsScreenAll
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.vpn.fastestvpnservice.R
+import com.vpn.fastestvpnservice.beans.SplitTunnelData
+import com.vpn.fastestvpnservice.beans.splitTunnelList
+import com.vpn.fastestvpnservice.beans.splitTunnelList2
+import com.vpn.fastestvpnservice.customItems.SplitTunnelingItem
+
+@Composable
+fun SplitTunneling(navHostController: NavHostController) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+    ) {
+        HeaderRowST(navHostController = navHostController)
+
+        Column(
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .padding(top = 120.dp, start = 0.dp, end = 0.dp)
+                .fillMaxSize()
+                .background(Color.Transparent)
+        ) {
+            var isExpanded by remember { mutableStateOf(true) }
+            val icon = if (isExpanded) R.drawable.dragarrow3x
+                        else R.drawable.downarrow3x
+//            val rotationState by animateFloatAsState(
+//                targetValue = if (isExpanded) 180f else 0f,
+//                label = if (isExpanded) "Show Less" else "Show More")
+
+            Row(
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 28.dp)
+                    .fillMaxWidth()
+            ) {
+                Text(text = "While VPN is Connected",
+                    style = TextStyle(
+                        fontSize = 16.sp,
+                        lineHeight = 20.sp,
+                        fontWeight = FontWeight.Medium,
+                        color = MaterialTheme.colorScheme.primary
+                    ),
+                    )
+                IconButton(onClick = {
+                    isExpanded = !isExpanded
+                },
+                    modifier = Modifier
+                        .background(Color.Transparent)
+//                        .rotate(rotationState)
+                        .size(12.dp, 7.dp)
+                ) {
+                    Icon(
+                        painter = painterResource(
+                            id = icon),
+                        contentDescription = "Arrow-DropDown",
+                        tint = MaterialTheme.colorScheme.primary
+                    )
+
+                }
+            }
+
+            if (isExpanded)
+            {
+                ShowRadioButtons()
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.ShowRadioButtons() {
+    val splitList = listOf("All apps use the VPN", "Only allow selected apps to use the vpn",
+        "Do not allow selected apps to use the vpn")
+    var selectedList by remember { mutableStateOf(splitList[0]) }
+
+    Spacer(modifier = Modifier.height(15.dp))
+
+    splitList.forEachIndexed { index, list ->
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(Color.Transparent)
+                    .padding(top = 0.dp)
+//                                    .selectable(
+//                                        selected = selectedProtocol == protocol,
+//                                        onClick = {
+//                                            selectedProtocol = protocol
+//                                        },
+//                                    )
+//                                    .indication(
+//                                        indication = null,
+//                                        interactionSource = remember {
+//                                            MutableInteractionSource()
+//                                        }
+//                                    )
+                ,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                RadioButton(selected = list == selectedList,
+                    onClick = {
+                        selectedList = list
+                    },
+                    colors = RadioButtonDefaults.colors(
+                        selectedColor = colorResource(
+                            id = R.color.radio_button_blue),
+                        unselectedColor = colorResource(
+                            id = R.color.gray_icon),)
+                )
+                Text(
+                    text = list,
+                    modifier = Modifier.padding(start = 12.dp),
+                    style = TextStyle(
+                        fontSize = 14.sp,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                )
+            }
+        }
+
+    Surface(
+        modifier = Modifier
+            .padding(start = 16.dp, end = 16.dp, top = 20.dp)
+            .height(1.dp)
+            .fillMaxWidth()
+            .alpha(0.6F)
+        ,
+        color = colorResource(id = R.color.gray_icon)
+    ) {}
+
+    if (selectedList == splitList[1]) {
+        ShowSplitTunnelList(splitTunnelList)
+    }
+    else if (selectedList == splitList[2]) {
+        ShowSplitTunnelList(splitTunnelList2)
+    }
+}
+
+@Composable
+fun ColumnScope.ShowSplitTunnelList(list: List<SplitTunnelData>) {
+    Box(modifier = Modifier
+        .padding(top = 5.dp)
+        .fillMaxSize()
+        .background(Color.Transparent)
+    ) {
+        LazyColumn() {
+            items(items = list) { app ->
+                SplitTunnelingItem(app)
+            }
+        }
+    }
+}
+
+@Composable
+fun BoxScope.HeaderRowST(navHostController: NavHostController) {
+    IconButton(
+        onClick = {
+            navHostController.popBackStack()
+//                    navHostController.navigate(BottomBarScreen.Help.route)
+        },
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .padding(top = 50.dp)
+            .padding(start = 16.dp)
+            .size(30.dp, 32.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.backarrow3x),
+            contentDescription = "Arrow-Back",
+            tint = MaterialTheme.colorScheme.primary,
+            modifier = Modifier.size(18.dp, 12.dp)
+        )
+    }
+    Surface(
+        modifier = Modifier
+            .padding(top = 50.dp)
+            .height(32.dp)
+            .align(Alignment.TopCenter)
+            .padding(5.dp),
+        color = colorResource(id = R.color.transparent)
+    ) {
+        Text(text = "Split Tunneling",
+            style = TextStyle(
+                fontSize = 18.sp,
+                color = MaterialTheme.colorScheme.primary,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            ),
+            modifier = Modifier.fillMaxHeight()
+
+        )
+    }
+}
+
+@Preview
+@Composable
+fun SplitTunnelingPreview() {
+    SplitTunneling(rememberNavController())
+}
+

app/src/main/java/com/vpn/fastestvpnservice/sealedClass/BottomBarScreen.kt

@@ -0,0 +1,40 @@
+package com.vpn.fastestvpnservice.sealedClass
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Help
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.Help
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
+import com.vpn.fastestvpnservice.R
+
+sealed class BottomBarScreen(
+    val route: String,
+    val title: String,
+    val icon: Int,
+    var isTrue: Boolean = false
+) {
+    data object Home : BottomBarScreen(
+        route = "home",
+        title = "Home",
+        icon = R.drawable.homeicon3
+    )
+    data object Settings : BottomBarScreen(
+        route = "settings",
+        title = "Settings",
+        icon = R.drawable.settingsicon3x
+    )
+    data object Help : BottomBarScreen(
+        route = "help",
+        title = "Help",
+        icon = R.drawable.helpicon3x
+    )
+    data object Account : BottomBarScreen(
+        route = "account",
+        title = "Account",
+        icon = R.drawable.accounticon3x
+    )
+}

app/src/main/java/com/vpn/fastestvpnservice/sealedClass/Screen.kt

@@ -0,0 +1,21 @@
+package com.vpn.fastestvpnservice.sealedClass
+
+sealed class Screen(val route: String, var isTrue: Boolean = false) {
+    data object Splash : Screen("splash_screen")
+    data object Login : Screen("login_screen")
+    data object SignUp : Screen("signup_screen")
+    data object ForgotPassword : Screen("forgot_password_screen")
+    data object Started : Screen("started_screen")
+    data object BottomBarMainScreen : Screen("bottom_bar_main_screen")
+    data object FAQ : Screen("faq_screen")
+    data object PrivacyPolicy : Screen("privacy_policy_screen")
+    data object TermsAndConditions : Screen("terms_and_conditions_screen")
+    data object About : Screen("about_screen")
+    data object CustomerSupport: Screen("customer_support_screen")
+    data object ChangePassword : Screen("change_password")
+    data object ServerList : Screen("server_list_screen")
+    data object Notifications : Screen("notifications_screen")
+    data object SplitTunneling : Screen("split_tunneling_screen")
+    data object FavoriteServers : Screen("favorite_servers_screen")
+    data object Subscription : Screen("subscription_screen")
+}

app/src/main/java/com/vpn/fastestvpnservice/ui/theme/Color.kt

@@ -0,0 +1,11 @@
+package com.vpn.fastestvpnservice.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple80 = Color(0xFFD0BCFF)
+val PurpleGrey80 = Color(0xFFCCC2DC)
+val Pink80 = Color(0xFFEFB8C8)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)

app/src/main/java/com/vpn/fastestvpnservice/ui/theme/Theme.kt

@@ -0,0 +1,82 @@
+package com.vpn.fastestvpnservice.ui.theme
+
+import android.app.Activity
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.colorResource
+import androidx.core.view.WindowCompat
+import com.vpn.fastestvpnservice.R
+
+/*
+primary = text,icon - white/darkBlueGrey
+secondar
+ */
+
+private val DarkColorScheme = darkColorScheme(
+//    primary = Purple80,
+    primary = Color.White,
+    onPrimary = Color.Black,
+    secondary = Color.White,
+    background = Color.Black
+)
+
+private val LightColorScheme = lightColorScheme(
+//    primary = Purple40,
+    primary = Color(0xFF0d1a2a),    // darkBlueGrey
+    onPrimary = Color.White,
+    secondary = Color.Black,
+    background = Color(0xFFf3f3f3)
+
+    /* Other default colors to override
+    background = Color(0xFFFFFBFE),
+    surface = Color(0xFFFFFBFE),
+    onPrimary = Color.White,
+    onSecondary = Color.White,
+    onTertiary = Color.White,
+    onBackground = Color(0xFF1C1B1F),
+    onSurface = Color(0xFF1C1B1F),
+    */
+)
+
+@Composable
+fun FastestVPNTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    dynamicColor: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    val colorScheme = when {
+//        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+//            val context = LocalContext.current
+//            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+//        }
+
+        darkTheme -> DarkColorScheme
+        else -> LightColorScheme
+    }
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+//            window.statusBarColor = colorScheme.primary.toArgb()
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+        }
+    }
+
+    MaterialTheme(
+        colorScheme = colorScheme,
+        typography = Typography,
+        content = content
+    )
+}

app/src/main/java/com/vpn/fastestvpnservice/ui/theme/Type.kt

@@ -0,0 +1,34 @@
+package com.vpn.fastestvpnservice.ui.theme
+
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    bodyLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    )
+    /* Other default text styles to override
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
+    )
+    */
+)

app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#3DDC84"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+</vector>