diff --git a/.changeset/afraid-geese-sin.md b/.changeset/afraid-geese-sin.md
new file mode 100644
index 0000000000..83e0ce92da
--- /dev/null
+++ b/.changeset/afraid-geese-sin.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Change Twitter to X brand
diff --git a/Gemfile b/Gemfile
index 3be24c4a94..d75c6a80bb 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll", "4.3.2"
+gem "jekyll", "4.3.3"
 
 group :jekyll_plugins do
 	gem "jekyll-random"
diff --git a/Gemfile.lock b/Gemfile.lock
index fa3e874124..fc4997f8df 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,23 +1,24 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.5)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.16.2)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
-    google-protobuf (3.24.3)
+    google-protobuf (4.26.1)
+      rake (>= 13)
     htmlbeautifier (1.4.2)
     htmlcompressor (0.4.0)
     http_parser.rb (0.8.0)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
-    jekyll (4.3.2)
+    jekyll (4.3.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -52,34 +53,34 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.4)
-    listen (3.8.0)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     mini_i18n (0.9.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.3)
-    rake (13.0.6)
+    public_suffix (5.0.5)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.6)
-    rouge (4.1.3)
+    rouge (4.2.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.68.0)
-      google-protobuf (~> 3.23)
+    sass-embedded (1.75.0)
+      google-protobuf (>= 3.25, < 5.0)
       rake (>= 13.0.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.4.2)
+    unicode-display_width (2.5.0)
     webrick (1.8.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (= 4.3.2)
+  jekyll (= 4.3.3)
   jekyll-random
   jekyll-redirect-from
   jekyll-tidy
diff --git a/_config.yml b/_config.yml
index 8806259eaf..2a6d565a2d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -181,6 +181,9 @@ button-states:
     title: Disabled
 
 socials:
+  x:
+    icon: brand-x
+    title: X
   facebook:
     icon: brand-facebook
     title: Facebook
diff --git a/src/pages/_data/timeline.yml b/src/pages/_data/timeline.yml
index a5855541c1..ff76ab1a3d 100644
--- a/src/pages/_data/timeline.yml
+++ b/src/pages/_data/timeline.yml
@@ -7,9 +7,9 @@
   title: Products
   date: 2 hrs ago
 
-- icon: brand-twitter
-  icon-bg: twitter
-  title: Twitter
+- icon: brand-x
+  icon-bg: x
+  title: X
   date: 8 hrs ago
 
 - icon: brand-dribbble
diff --git a/src/pages/_includes/cards/profile-2.html b/src/pages/_includes/cards/profile-2.html
index 3fbb4ba2c8..e42a9dc59d 100644
--- a/src/pages/_includes/cards/profile-2.html
+++ b/src/pages/_includes/cards/profile-2.html
@@ -13,8 +13,8 @@ <h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</
 						</a>
 					</li>
 					<li class="list-inline-item">
-						<a href="#" title="Twitter" data-bs-toggle="tooltip">
-							{% include ui/icon.html icon="brand-twitter" %}
+						<a href="#" title="X" data-bs-toggle="tooltip">
+							{% include ui/icon.html icon="brand-x" %}
 						</a>
 					</li>
 					<li class="list-inline-item">
diff --git a/src/pages/_includes/cards/profile.html b/src/pages/_includes/cards/profile.html
index 5c8f08269b..bbf2826eab 100644
--- a/src/pages/_includes/cards/profile.html
+++ b/src/pages/_includes/cards/profile.html
@@ -7,7 +7,7 @@ <h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].las
 		</p>
 
 		<button class="btn btn-outline-primary btn-sm">
-			{% include ui/icon.html icon="brand-twitter" %}
+			{% include ui/icon.html icon="brand-x" %}
 			Follow
 		</button>
 	</div>
diff --git a/src/pages/_includes/cards/sign-in.html b/src/pages/_includes/cards/sign-in.html
index 080cdd2ea2..b84985628e 100644
--- a/src/pages/_includes/cards/sign-in.html
+++ b/src/pages/_includes/cards/sign-in.html
@@ -10,7 +10,7 @@ <h2 class="h2 text-center mb-4">Login to your account</h2>
 	<div class="card-body">
 		<div class="row">
 			<div class="col">{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
-			<div class="col">{% include ui/button.html  block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
+			<div class="col">{% include ui/button.html  block=true icon="brand-x" icon-color="x" text="Login with X" %}</div>
 		</div>
 	</div>
 </div>
diff --git a/src/pages/_includes/cards/timeline.html b/src/pages/_includes/cards/timeline.html
index 039aace6e8..7bc1f93f5b 100644
--- a/src/pages/_includes/cards/timeline.html
+++ b/src/pages/_includes/cards/timeline.html
@@ -1,6 +1,6 @@
 <ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
 	<li class="timeline-event">
-		<div class="timeline-event-icon bg-twitter-lt">{% include ui/icon.html icon="brand-twitter" %}</div>
+		<div class="timeline-event-icon bg-x-lt">{% include ui/icon.html icon="brand-x" %}</div>
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">10 hrs ago</div>
diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html
index dd98d21d0d..d6c21aa3f2 100644
--- a/src/pages/_includes/forms/form-elements-6.html
+++ b/src/pages/_includes/forms/form-elements-6.html
@@ -26,7 +26,7 @@
 			{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}
 		</div>
 		<div class="col">
-			{% include ui/button.html  block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
+			{% include ui/button.html  block=true icon="brand-x" icon-color="x" text="Login with X" %}
 		</div>
 	</div>
 </div>
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
index 308f7ca0fe..c1563a0e8a 100644
--- a/src/pages/_includes/layout/homepage.html
+++ b/src/pages/_includes/layout/homepage.html
@@ -22,7 +22,7 @@
 				{% include cards/small-stats.html color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" %}
 			</div>
 			<div class="col-sm-6 col-lg-3">
-				{% include cards/small-stats.html icon="brand-twitter" color="twitter" title="623 Shares" description="16 today" %}
+				{% include cards/small-stats.html icon="brand-x" color="x" title="623 Shares" description="16 today" %}
 			</div>
 			<div class="col-sm-6 col-lg-3">
 				{% include cards/small-stats.html icon="brand-facebook" color="facebook" title="132 Likes" description="21 today" %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 4007b8bf67..9b1b1dd618 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -251,6 +251,7 @@ $extra-colors: (
 ) !default;
 
 $social-colors: (
+  "x": #000000,
   "facebook": #1877f2,
   "twitter": #1da1f2,
   "linkedin": #0a66c2,