diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9491a2f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,363 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Oo]ut/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Coverlet is a free, cross platform Code Coverage Tool
+coverage*.json
+coverage*.xml
+coverage*.info
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
new file mode 100644
index 0000000..ecd43d5
--- /dev/null
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
@@ -0,0 +1,307 @@
+.bet-button {
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 10px;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+    outline: none;
+}
+
+/* Цвета для кнопок */
+.bet-button.red {
+    background-color: #863443;
+}
+
+.bet-button.green {
+    background-color: #2D4940;
+}
+
+.bet-button.black {
+    background-color: #202333;
+}
+
+/* Стили для нажатой кнопки */
+.bet-button:active {
+    transform: scale(0.95);
+    /* Уменьшение при нажатии */
+}
+.bet-button.active {
+    opacity: 0.7; /* Пример изменения стиля активной кнопки */
+  }
+
+/* Можно добавить тени для кнопок, чтобы они выглядели объемнее */
+.bet-button {
+    margin: 1.2% 0 0 5.8%;
+    margin-bottom:1vh;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Стиль для тени при нажатии (опционально) */
+.bet-button:active {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.double-start {
+    z-index: 1;
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    height: 37vh;
+    border: 1px solid #262C55;
+    margin: 2.6%;
+    margin-top: 0px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-ui-component {
+    display: flex;
+    align-items: center;
+    background-color: #25325A;
+    border-radius: 15px;
+    /* padding: 10px 20px; */
+    padding-right: 2vh;
+    padding-bottom: 1vh;
+    padding-top: 1vh;
+    padding-left: 2vh;
+    margin-bottom: 1vh;
+    max-width: 300px;
+    color: white;
+    font-family: Arial, sans-serif;
+    /* background: linear-gradient(to right, #1C213390 50%, #2F5139); */
+}
+
+.double-ui-component-gradient {
+    background: linear-gradient(to right, #1C213390 50%, #2F5139);
+}
+
+/* .double-ui-component img {} */
+
+.double-ui-component .double-username {
+    flex-grow: 1;
+    text-align: left;
+    margin-left: 1vh;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #515D83;
+}
+
+.double-ui-component .double-score {
+    display: flex;
+    align-items: center;
+}
+
+.double-score {
+    font-size: 20px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #748985;
+}
+
+.double-img-user {
+    margin-top: 6px;
+}
+
+.double-ui-component .double-score img {
+    width: 3vh;
+    height: 3vh;
+    margin-left: 10px;
+}
+
+.double-members-ingame-red {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #A9373C,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-green {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #345D3B,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-black {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #1B1A1A,
+            #1C2133 26%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    margin-top: 1vh;
+    width: 100%;
+    /* height: 94%; */
+    height: 49vh;
+    padding: 2vh;
+}
+
+.double-members-flex-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-bottom: 2vh;
+}
+
+.double-red-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #B64848;
+}
+
+.double-white-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: FEEBEB;
+}
+
+.double-green-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #5EA25C;
+}
+
+.double-number-color {
+    color: #56629A;
+    font-weight: bold;
+    font-size: 18px;
+    font-family: Montserrat;
+}
+
+.double-red-box span {
+    font-size: larger;
+    /* Or any specific size */
+    margin-left: 5px;
+    /* Spacing between RED and X2 */
+}
+
+.double-user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.double-user-icon .double-user-icon-span {
+    background-image: url('../../../icons-games/double-game/MembersInGame.png');
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-game-main-box {
+    border-radius: 10px;
+    border: 1px solid #262C55;
+    padding-top: 4vh;
+    padding-bottom: 4vh;
+    padding-left: 0vh !important;
+    padding-right: 0vh !important;
+    background: #1A1F37;
+    margin-bottom: 1vh !important;
+}
+
+.double-carousel {
+    z-index: 1;
+    position: relative;
+    background: #2E2D37;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-top: 1px;
+    border: 1vh solid #2E2D37;
+    border-right: 0vh !important;
+    border-left: 0vh !important;
+    height: 95%;
+}
+
+.container-double-history-text {
+    display: flex;
+}
+
+.double-history-text {
+    background-color: #728DF8;
+    border: none;
+    color: #0E1220;
+    padding-right: 1vh;
+    padding-left: 1vh;
+    font-size: 16px;
+    margin: 4px 2px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+}
+
+.double-carousel-arrow {
+    position: absolute;
+    bottom: -3vh;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-carousel-arrow-upper {
+    position: absolute;
+    top: -3vh;
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-game-history-main-box {
+    border-radius: 20px;
+    border: 1px solid #262C55;
+    padding-top: 1vh;
+    padding-bottom: 0vh;
+    padding-left: 1vh;
+    padding-right: 0vh;
+    background: #1A1F37;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
index a3bce2b..a503d61 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
@@ -47,17 +47,12 @@
 .carousel-arrow {
     position: absolute;
     bottom: -20px;
-    /* Регулируйте положение стрелки относительно нижнего края карусели */
     left: 50%;
-    /* Центрирование стрелки по горизонтали */
     transform: translateX(-50%);
-    /* Дополнительное центрирование, чтобы точка указывала точно на центр */
     color: #728DF8;
-    /* Цвет стрелки */
     font-size: 24px;
-    /* Размер стрелки */
-    /* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */
 }
+
 .jackpot-useringame-list{
     margin-top: 3.5%;
     overflow-y: auto;
diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
index 3f2c7eb..ef3a2bc 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -150,7 +150,8 @@
 #diamonds-input {
     /* width: 347px;
     height: 38px; */
-    width: 37vh;
+    /* width: 37vh; */
+    width: 36vh;
     height: 4vh;
 }
 
diff --git a/luckydiamond/src/assets/css/PagesStyles/home.css b/luckydiamond/src/assets/css/PagesStyles/home.css
index 01dfcb0..5049070 100644
--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -97,7 +97,7 @@
 
 .bg-early{
     border-radius: 40px;
-    background: #969B9E;
+    background: #EF4444;
     box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
@@ -357,7 +357,7 @@
 .gamemode__twoline--first__element {
     width: 100%;
     margin: 2% 3.6% 0 5.5%;
-    min-height: 180px;
+    min-height: 209px;
 }
 
 .linecontent-3 {
@@ -370,23 +370,13 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 80px;
+    font-size: 60px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 4.5% 2.2%;
 }
 
-.gamemode__twoline--first__element .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 
-.gamemode__twoline--first__element .container a {
-    margin-right: 10%;
-    padding: 12px 10px;
-    margin-bottom: 3%;
-}
 
 .gamemode__twoline--two__element {
     margin-top: 2%;
@@ -406,6 +396,21 @@
 .cumming_soon--img {
     margin-bottom: 4%;
 }
+.gamemode__twoline--two__element {
+    margin-top: 2%;
+    width: 100%;
+    min-height: 180px;
+}
+
+.gamemode__twoline--first__element .container {
+    display: flex;
+    justify-content: center;
+    
+}
+
+.gamemode__twoline--first__element .container a {
+    margin-right: 10%;
+}
 
 /* /GameMode */
 
@@ -430,7 +435,7 @@
     }
 
     .title-twoline {
-        font-size: 60px;
+        font-size: 40px;
     }
 
     .line__img__jackpot {
@@ -472,11 +477,7 @@
         width: 80px;
     }
 
-    .gamemode__twoline--first__element .container a {
-        margin-right: 10%;
-        padding: 2px 11px 11px 11px;
-        margin-bottom: 3%;
-    }
+    
 
     .line__btn__jackpot {
         border-radius: 16px;
@@ -506,7 +507,7 @@
     }
 
     .title-twoline {
-        font-size: 40px;
+        font-size: 20px;
     }
 
     .line__img__jackpot {
@@ -549,11 +550,7 @@
         width: 80px;
     }
 
-    .gamemode__twoline--first__element .container a {
-        margin-right: 10%;
-        padding: 2px 11px 11px 11px;
-        margin-bottom: 3%;
-    }
+    
 
     .line__btn__jackpot {
         border-radius: 10px;
@@ -575,15 +572,16 @@
         height: 265px;
     }
 
-    .gamemode__twoline--first__element {
-        width: 100%;
-        margin: 0 3.6% 0 5.5%;
-        min-height: 60px;
-    }
+    
 
     .gamemode__twoline--two__element {
         margin-top: 0;
         width: 100%;
         min-height: 60px;
     }
+    .gamemode__twoline--first__element {
+        margin-top: 0;
+        width: 100%;
+        min-height: 60px;
+    }
 }
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/PagesStyles/settings.css b/luckydiamond/src/assets/css/PagesStyles/settings.css
index 6d73a79..3dd9e19 100644
--- a/luckydiamond/src/assets/css/PagesStyles/settings.css
+++ b/luckydiamond/src/assets/css/PagesStyles/settings.css
@@ -76,3 +76,56 @@
   background: red; /* Цвет фона трека для Firefox */
   height: 8px; /* Высота трека для Firefox */
 }
+
+
+     
+/* toggle in label designing */
+.toggle {
+  position : relative ;
+  display : flex;
+  width : 60px;
+  height : 32px;
+  background-color: #000413;
+  border-radius: 5px;
+  justify-content: center;
+ align-items: center;
+ 
+  
+}
+     
+/* After slide changes */
+.toggle:after {
+  content: '';
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+  background-color: #EF4444;
+  top: 5px; 
+  left: 6px;
+  transition:  all 0.5s;
+}
+     
+/* Toggle text */
+.toggle p {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+     
+/* Checkbox checked effect */
+.checkbox:checked + .toggle::after {
+  
+  left : 34px; 
+}
+     
+/* Checkbox checked toggle label bg color */
+
+     
+/* Checkbox vanished */
+.checkbox { 
+  display : none;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 40e5e42..b702f24 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -109,6 +109,22 @@ button {
     grid-gap: 0.625rem;
 }
 
+.content-grid--double {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat";
+    grid-gap: 0.625rem;
+}
+
 .grid-crash {
     display: grid;
     grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
@@ -163,7 +179,7 @@ button {
     height: 86vh;
     position: relative;
     z-index: 3;
-   
+
 }
 
 /* /Chat */
@@ -211,9 +227,15 @@ button {
     margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }
 
+.double {
+    display: flex;
+    grid-area: double;
+   
+}
+
 .about {
     grid-area: about;
-    
+
 }
 
 
@@ -279,7 +301,7 @@ button {
     grid-area: help;
     display: flex;
     /* height:99%; */
-    height:86vh;
+    height: 86vh;
     border-radius: 3.125rem;
     background: #17181C;
     box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
@@ -287,7 +309,7 @@ button {
     /*height: 96.2%;*/
     width: 1000px;
     margin: 0 auto;
-    
+
 }
 
 
@@ -314,8 +336,9 @@ button {
     height: 35%;
     z-index: 0;
 }
+
 /* /Crash */
 
 /* Media */
 
-/* /Media */
+/* /Media */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png
new file mode 100644
index 0000000..534865b
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png
new file mode 100644
index 0000000..b79ba1d
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png
new file mode 100644
index 0000000..490524a
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png b/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png
new file mode 100644
index 0000000..abd37cd
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.png b/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.png
new file mode 100644
index 0000000..9c11aa7
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.png b/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.png
new file mode 100644
index 0000000..fd4fb7b
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.png b/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.png
new file mode 100644
index 0000000..c9934c3
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.png differ
diff --git a/luckydiamond/src/assets/icons-games/saper-game/arrowTop.png b/luckydiamond/src/assets/icons-games/saper-game/arrowTop.png
new file mode 100644
index 0000000..8ea76a2
Binary files /dev/null and b/luckydiamond/src/assets/icons-games/saper-game/arrowTop.png differ
diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js
index 8566c14..3b3d6b0 100644
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -29,10 +29,14 @@ export function ConnectToChat() {
                     return;
                 }
 
+                if (dataObject.MessageType == 'DoubleGameState') {
+                    eventBus.emit('doubleGame', event.data)
+                    return;
+                }
+
                 if (dataObject.MessageType == "CrashGameState") {
                     eventBus.emit('crash', event.data);
                     return;
-
                 }
 
                 if (Array.isArray(dataObject.CurrentGame.PlayerList)) {
@@ -41,7 +45,7 @@ export function ConnectToChat() {
                 }
 
             } catch (error) {
-                void(error);
+                void (error);
             }
         };
 
diff --git a/luckydiamond/src/assets/js/games/double/DoubleApi.js b/luckydiamond/src/assets/js/games/double/DoubleApi.js
new file mode 100644
index 0000000..54e5a8b
--- /dev/null
+++ b/luckydiamond/src/assets/js/games/double/DoubleApi.js
@@ -0,0 +1,69 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
+
+export async function GetNewestDoubleGames() {
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/GetNewestDoubleGames`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
+
+export async function JoinGame(amount, betColor) {
+
+   let betColorInt = 0;
+    if (betColor == "red") {
+        betColorInt = 0;
+    }
+    if (betColor == "green") {
+        betColorInt = 1;
+    }
+    if (betColor == "black") {
+        betColorInt = 2;
+    }
+
+    const data = {
+        UserCredentials: {
+            SearchToken: GetCookie("SearchToken"),
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
+        },
+        bet: amount,
+        betColor: betColorInt
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/JoinGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
\ No newline at end of file
diff --git a/luckydiamond/src/components/AsidebarComponent.vue b/luckydiamond/src/components/AsidebarComponent.vue
index 46d78b9..ad16767 100644
--- a/luckydiamond/src/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -9,7 +9,8 @@
           <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
           <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></a>
           <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
+          <a href="#" @click="$router.push({ name: 'double' })"><img  class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
+          
            <!-- <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a> -->
           <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
         </div>
diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index 7b52ccf..769ca9d 100644
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -29,6 +29,8 @@
           </li>
         </transition-group>
       </ul>
+    
+    
     </div>
     <writechat-component @send="ClaimDatamsg"></writechat-component>
     <!-- <div class="chat__mute-button">
diff --git a/luckydiamond/src/main.js b/luckydiamond/src/main.js
index bbec2cd..a122e43 100644
--- a/luckydiamond/src/main.js
+++ b/luckydiamond/src/main.js
@@ -22,6 +22,7 @@ export const eventBus = mitt()
 // const app = createApp(App)
 const app = createApp(siteIsOff ? SiteOff : App);
 
+
 if (!siteIsOff) {
     app.use(router);
     app.mixin(Mixins);
@@ -32,6 +33,20 @@ if (!siteIsOff) {
 // app.use(router)
 // app.mixin(Mixins)
 
+app.config.warnHandler = (msg) => {
+    // Intercept specific warning message and suppress it
+    if (msg.includes('Property or method "clickedBtn" is not defined on the instance but referenced during render.')) {
+      // You can simply return to ignore it, or even better, log it somewhere if you have a logging system
+      return;
+    }
+  
+    // Log or handle other warnings as you see fit
+  };
+
+app.use(router)
+app.mixin(Mixins)
+
+
 app.mount('#app')
 // app.provide(eventBus)
 
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index 2f5f79b..11877ab 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -79,15 +79,19 @@
           <div class="gamemode__twolines">
             <div class="gamemode__twoline--first__element bg-early">
               <ul>
-                <li v-for="mode in twolinefirstelementGameMode" :key="mode">
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
                   <div :class="'linecontent-' + mode.id">
-                    <h3 class="title-twoline">скоро</h3>
+                    <h3 class="title-twoline">рулетка</h3>
                   </div>
                   <div class="container">
-                    <a href="#" class="cumming_soon_btn"
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'double' })"
+                      class="line__btn--crash"
                       >play <span class="line__btn--elm"></span></a
                     >
-                    <img src="@/assets/icons-gamemodes/slots-icon.png" class="cumming_soon--img" />
+                    <img class="crash--img" src="@/assets/icons-gamemodes/slots-icon.png" />
                   </div>
                 </li>
               </ul>
diff --git a/luckydiamond/src/pages/SettingsPage.vue b/luckydiamond/src/pages/SettingsPage.vue
index a077510..d13e8f1 100644
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -12,19 +12,32 @@
     <button id="volume-down" @click="volumeDown">-</button>
   </div>
      -->
-      <div class="volume-section">
-        <h1 class="volume-text">Звук</h1>
-        <input
-          id="volumeControl"
-          type="range"
-          min="0"
-          max="10"
-          v-model="volume"
-          @input="handleVolumeChange"
-          ref="volumeControl"
-        />
-        <h1 class="volume-text--grey">Данная страница находится в разработке, и будет полностью переделанна</h1>
+      <div class="classssboxxxx">
+        <div class="volume-section">
+          <h1 class="volume-text">Звук</h1>
+          <input
+            id="volumeControl"
+            type="range"
+            min="0"
+            max="10"
+            v-model="volume"
+            @input="handleVolumeChange"
+            ref="volumeControl"
+          />
+        </div>
 
+        <!-- 3/23/2024 DT I turned off the chat off button because it wasn't working and wasn't displaying correctly on the frontend  -->
+        <!-- <div class="buttonbox">
+        <input type="checkbox"
+               id="switch"
+               class="checkbox" />
+                
+        <label for="switch"
+               class="toggle">
+            
+        </label>
+        <p>скрыть чат</p>
+      </div> -->
       </div>
     </section>
   </div>
diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue
new file mode 100644
index 0000000..2003ac8
--- /dev/null
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -0,0 +1,668 @@
+<template>
+  <div class="content-grid--double">
+    <aside-bar-component></aside-bar-component>
+    <chat-component></chat-component>
+    <header-component></header-component>
+    <div class="bg-gradient-left"></div>
+    <section class="double">
+      <div class="double-start">
+        <div
+          class="jackpot-start__content title-saper padding-elements-jackpot"
+        >
+          <h2>Рулетка</h2>
+          <p>Крути, ставь, побеждай!</p>
+          <div class="saper-start__choises diamonds diamonds-input__margin">
+            <h3>Цвет победной ячейки</h3>
+            <button class="bet-button red" :class="{ active: activeButton === 'red' }" @click="handleClick('red')">
+              x2
+            </button>
+            <button class="bet-button green" :class="{ active: activeButton === 'green' }" @click="handleClick('green')">
+              x20
+            </button>
+            <button class="bet-button black" :class="{ active: activeButton === 'black' }" @click="handleClick('black')">
+              x2
+            </button>
+
+            <div class="diamonds__choises">
+              <img
+                class="diamond-icon"
+                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
+              />
+              <input
+                v-model="amountDeposit"
+                type="number"
+                id="diamonds-input"
+              />
+              <div class="diamonds__btns btn-style__diamonds">
+                <ul class="diamonds-btns__display">
+                  <li v-for="(item, index) in JackpotNumbers" :key="index">
+                    <button
+                      @click="clickedBtnChoice(index, item.diamonds)"
+                      :class="{
+                        'btn-click': clickedBtn === index,
+                        [index]: clickedBtn === index,
+                      }"
+                      :id="item.diamonds === 'max' ? 'max-button' : null"
+                      v-if="item.diamonds !== undefined"
+                    >
+                      {{ item.diamonds }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="jackpot-start__btns">
+            <div class="error-block" v-if="ErrorClick">
+              <h2>Ошибка при заполнении</h2>
+            </div>
+            <button
+              class="btn-start"
+              :class="{ 'animate-start-btn': ErrorClick }"
+              @click="clickPlayBtn"
+            >
+              Начать игру
+            </button>
+            <!-- <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
+                  <button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button> -->
+          </div>
+        </div>
+      </div>
+      <!-- </div> -->
+      <div class="double-game">
+        <div class="bootstrap-wrapper">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-12 double-game-main-box">
+                <div class="double-carousel">
+                  <div class="double-carousel-arrow">▲</div>
+                  <div class="double-carousel-arrow-upper">▲</div>
+                  <Carousel
+                    ref="carousel"
+                    :wrapAround="true"
+                    :autoplay="autoPlay"
+                    class="no-pointer-events"
+                    :transition="150"
+                    :itemsToShow="10"
+                    @slide-start="handleStepCarousel"
+                  >
+                    <Slide v-for="(slide, index) in slides" :key="index">
+                      <div>
+                        <img
+                          :src="slide.img"
+                          onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
+                        />
+                      </div>
+                    </Slide>
+                  </Carousel>
+                </div>
+              </div>
+              <div class="col-md-12 double-game-history-main-box">
+                <div class="container-double-history-text">
+                  <span class="double-history-text">история</span>
+                </div>
+
+                <div class="double--history-carousel">
+                  <Carousel
+                    ref="carouselHistory"
+                    class="no-pointer-events"
+                    :transition="150"
+                    :itemsToShow="24"
+                  >
+                    <Slide v-for="(slide, index) in slidesHistory" :key="index">
+                      <div>
+                        <img
+                          :src="slide.img"
+                          onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
+                        />
+                      </div>
+                    </Slide>
+                  </Carousel>
+                </div>
+              </div>
+              <div class="col-md-4" style="padding-left: 0px">
+                <div class="double-members-ingame-red">
+                  <div class="double-members-flex-container">
+                    <div class="double-red-box">RED X2</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountRed
+                      }}</span>
+                    </div>
+                  </div>
+
+                  <div
+                    v-for="user in usersRed"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                  <!-- </div> -->
+                </div>
+              </div>
+              <div class="col-md-4" style="padding-left: 0px">
+                <div class="double-members-ingame-green">
+                  <div class="double-members-flex-container">
+                    <div class="double-green-box">GREEN X20</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountGreen
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersGreen"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="col-md-4"
+                style="padding-left: 0px; padding-right: 0px"
+              >
+                <div class="double-members-ingame-black">
+                  <div class="double-members-flex-container">
+                    <div class="double-white-box">BLACK X2</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountBlack
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersBlack"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import { reactive, ref, onMounted } from "vue";
+
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import JackpotNumbers from "@/mocks/JackpotNumbers";
+import { GetNewestDoubleGames,JoinGame } from "@/assets/js/games/double/DoubleApi";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+import "@/assets/css/PagesStyles/games-pages/jackpot.css";
+import "@/assets/css/PagesStyles/games-pages/double.css";
+import "@/assets/css/global.css";
+import { eventBus } from "@/main";
+import { useVuelidate } from "@vuelidate/core";
+import {
+  maxValue,
+  minValue,
+  required,
+  numeric,
+  integer,
+} from "@vuelidate/validators";
+
+export default {
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    ChatComponent,
+    Carousel,
+    Slide,
+  },
+  data() {
+    return {
+      JackpotNumbers,
+      clickedColor: "",
+      amountDeposit: 0,
+      activeButton: null
+    };
+  },
+  methods: {
+    async clickedBtnChoice(index, content) {
+      this.clickedBtn = index;
+      if (content === "max") {
+        await GetCurrentMoney(
+          GetCookie("AUTHTOKEN"),
+          GetCookie("SearchToken")
+        ).then((response) => {
+          const responseBalance = response.currentMoney;
+
+          if (responseBalance === this.balance) {
+            this.amountDeposit = parseInt(responseBalance);
+          }
+        });
+      } else {
+        this.amountDeposit = content;
+      }
+    },
+    async handleClick(color) {
+      this.clickedColor = color;
+      this.activeButton = color;
+    }
+,
+    async clickPlayBtn() {
+      this.v$.$touch();
+      this.offBtn = true;
+
+      if (
+        this.balance < this.amountDeposit ||
+        !Number.isInteger(Number(this.amountDeposit))
+      ) {
+        this.textError = "Некорректное значение. Введите целое число.";
+        this.offBtn = false;
+        this.errorPlayButton();
+      }
+
+      await JoinGame(this.amountDeposit,this.clickedColor).then((response) => {
+        if (
+          response === `You can't join to started or ended game` ||
+          response === "Player alredy in the game."
+        ) {
+          this.offBtn = false;
+
+          if (response === `You can't join to started or ended game`) {
+            this.textError = "Игра уже началась или только закончилась!";
+            this.errorPlayButton();
+          } else if (response === "Player alredy in the game.") {
+            this.textError = "Вы уже в игре!";
+            this.errorPlayButton();
+          }
+
+          return;
+        }
+
+        // if (response.ok) {
+        //   this.offBtn = false;
+        //   this.startGame = true;
+        // }
+      });
+      this.offBtn = false;
+    }
+  },
+  validations() {
+    return {
+      amountDeposit: {
+        required,
+        numeric,
+        minValue: minValue(1),
+        maxValue: maxValue(this.balance),
+        integer,
+      },
+    };
+  },
+  async created() {},
+
+  setup() {
+    const v$ = useVuelidate();
+
+    const usersRed = ref([]);
+
+    const usersGreen = ref([]);
+
+    const usersBlack = ref([]);
+
+    const numberUserCountRed = ref(0);
+
+    const numberUserCountGreen = ref(0);
+
+    const numberUserCountBlack = ref(0);
+
+    const slides = reactive([
+      {
+        img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
+        target: "Green",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
+        target: "Green",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+    ]);
+
+    const slidesHistory = reactive([]);
+
+    let doubleData = reactive({});
+
+    let autoPlay = ref(0);
+    let targetColor = ref("");
+    let timeToGame = ref(0);
+    let endGame = ref(false);
+
+    onMounted(() => {
+      loadGameHistory();
+
+      // usersRed.value = fetchUsersRed();
+
+      eventBus.on("doubleGame", (dataDouble) => {
+        const dataDoubleParse = JSON.parse(dataDouble);
+
+        if (dataDoubleParse.Players.length > 0) {
+          processUsersInGame(dataDoubleParse.Players);
+        }
+        if (endGame.value != true) {
+          if (dataDoubleParse.Status == "InGame") {
+            autoPlay.value = 20;
+            targetColor.value = dataDoubleParse.WInColor;
+          }
+          if (dataDoubleParse.Status == "GameEnd") {
+            targetColor.value = dataDoubleParse.WInColor;
+            endGame.value = true;
+            autoPlay.value = 150;
+
+            addWinEffectTouUsers(
+              dataDoubleParse.Players,
+              dataDoubleParse.WInColor
+            );
+          }
+        }
+      });
+    });
+
+    function addWinEffectTouUsers(usersArray, winColor) {
+      usersArray.forEach((user) => {
+        if (user.BetColor == winColor) {
+          setTimeout(() => {
+            addGradientClassToUser(user);
+          }, 2000);
+        }
+      });
+    }
+    
+    function addGradientClassToUser(user) {
+      const element = document.getElementById("user-" + user.UserName);
+
+      if (element) {
+        element.classList.add("double-ui-component-gradient");
+      }
+    }
+
+    function addUserIfNotExist(usersArray, newUser, BetColor) {
+      const userExists = usersArray.some((user) => user.name === newUser.name);
+
+      if (!userExists) {
+        if (BetColor == "Red") {
+          numberUserCountRed.value += 1;
+        }
+        if (BetColor == "Green") {
+          numberUserCountGreen.value += 1;
+        }
+        if (BetColor == "Black") {
+          numberUserCountBlack.value += 1;
+        }
+        usersArray.push(newUser);
+      }
+    }
+
+    function handleStepCarousel(data) {
+      try {
+        if (endGame.value == true) {
+          let { currentSlideIndex } = data;
+          if (
+            slides[currentSlideIndex + 1].target == targetColor.value &&
+            endGame.value == true
+          ) {
+            stopAutoPlay();
+
+            setTimeout(() => {
+              setTimeout(() => {
+                if (
+                  usersRed.value.length > 0 ||
+                  usersBlack.value.length > 0 ||
+                  usersGreen.value.length > 0
+                ) {
+                  usersRed.value = [];
+                  usersGreen.value = [];
+                  usersBlack.value = [];
+                }
+              }, 4000);
+
+              loadGameHistory();
+            }, 2000);
+          }
+        }
+      } catch (error) {
+        void error;
+      }
+    }
+
+    function processUsersInGame(users) {
+      users.forEach((user) => {
+        if (user.BetColor == "Red") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersRed.value, newUser, "Red");
+        }
+        if (user.BetColor == "Green") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersGreen.value, newUser, "Green");
+        }
+        if (user.BetColor == "Black") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersBlack.value, newUser, "Black");
+        }
+      });
+    }
+
+    async function loadGameHistory() {
+      try {
+        await GetNewestDoubleGames()
+          .then((response) => {
+            return response.json();
+          })
+          .then((data) => {
+            slidesHistory.value = [];
+            slidesHistory.length = 0;
+            for (let i = 0; i < 25; i++) {
+              // doubleData = Object.assign(doubleData, dataDoubleParse);
+
+              // timeToGame.value = doubleData.WaitingTime;
+              if (data[i].winColor == "Red") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleRedDouble.png"),
+                  target: "Red",
+                });
+              }
+              if (data[i].winColor == "Black") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleBlackDouble.png"),
+                  target: "Black",
+                });
+              }
+              if (data[i].winColor == "Green") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleGreenDouble.png"),
+                  target: "Green",
+                });
+              }
+            }
+
+            console.log(data);
+          })
+          .catch((error) => {
+            void error;
+          });
+      } catch (error) {
+        void error;
+      }
+    }
+
+    function stopAutoPlay() {
+      autoPlay.value = 0;
+      endGame.value = false;
+      targetColor.value = "";
+    }
+
+    return {
+      slides,
+      slidesHistory,
+      autoPlay,
+      doubleData,
+      targetColor,
+      timeToGame,
+      handleStepCarousel,
+      stopAutoPlay,
+      usersRed,
+      usersBlack,
+      usersGreen,
+      v$,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.carousel__slide {
+  padding: 1px;
+}
+
+.carousel__viewport {
+  perspective: 2000px;
+}
+
+.carousel__track {
+  transform-style: preserve-3d;
+}
+
+.carousel__slide--sliding {
+  transition: 0.5s;
+}
+
+.carousel__slide {
+  opacity: 0.9;
+  transform: rotateY(-20deg) scale(0.9);
+}
+
+.carousel__slide--active ~ .carousel__slide {
+  transform: rotateY(20deg) scale(0.9);
+}
+
+.carousel__slide--prev {
+  opacity: 1;
+  transform: rotateY(-10deg) scale(0.95);
+}
+
+.carousel__slide--next {
+  opacity: 1;
+  transform: rotateY(10deg) scale(0.95);
+}
+
+.carousel__slide--active {
+  opacity: 1;
+  transform: rotateY(0) scale(1.1);
+}
+.double--history-carousel {
+  opacity: 1 !important;
+  transform: rotateY(0) scale(1) !important;
+}
+.double--history-carousel .carousel__slide--active ~ .carousel__slide,
+.double--history-carousel .carousel__slide--prev,
+.double--history-carousel .carousel__slide--next,
+.double--history-carousel .carousel__slide--active {
+  opacity: 1;
+  transform: rotateY(0) scale(1);
+}
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/router/router.js b/luckydiamond/src/router/router.js
index 94c52fb..febf745 100644
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -6,6 +6,7 @@ import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue";
 import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
 import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
+import DoublePage from "@/pages/games-pages/DoublePage.vue";
 import AboutPage from "@/pages/AboutPage.vue";
 import HelpPage from "@/pages/HelpPage.vue" ;
 
@@ -17,6 +18,7 @@ export default createRouter({
         { path: '/game/saper', component: SapergamePage, name: 'saper' },
         { path: '/game/crash', component: CrashGamePage, name: 'crash' },
         { path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
+        { path: '/game/double', component: DoublePage, name: 'double' },
         { path: '/settings', component: SettingsPage, name: 'settings' },
         { path: '/about', component: AboutPage, name: 'about' },
         { path: '/help', component: HelpPage, name: 'help' },