diff --git a/ui/src/components/layouts/PublicLayout.tsx b/ui/src/components/layouts/PublicLayout.tsx
index 24ff9f4..5162fb9 100644
--- a/ui/src/components/layouts/PublicLayout.tsx
+++ b/ui/src/components/layouts/PublicLayout.tsx
@@ -10,7 +10,6 @@ import {
   LuBriefcase,
   LuPackage,
   LuBookOpen,
-  LuMonitorPlay,
   LuPhone,
   LuMapPin,
   LuMail,
@@ -93,12 +92,6 @@ const PublicLayout = () => {
       path: ROUTES_ENUM.public.blog,
       icon: LuBookOpen,
     },
-    {
-      resourceKey: 'App.Demos',
-      name: translate('::App.Demos'),
-      action: () => setIsDemoOpen(true),
-      icon: LuMonitorPlay,
-    },
     {
       resourceKey: 'Public.nav.contact',
       name: translate('::App.Contact'),
@@ -114,21 +107,36 @@ const PublicLayout = () => {
 
   const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
 
+  const demoButton = (className = '', onClick?: () => void) => (
+    <button
+      type="button"
+      onClick={() => {
+        setIsDemoOpen(true)
+        onClick?.()
+      }}
+      className={`group inline-flex items-center justify-center gap-1.5 text-sm font-semibold text-gray-200 hover:text-white transition-colors ${className}`}
+    >
+      <span className="relative inline-flex h-7 w-7 items-center justify-center overflow-visible rounded-full border-2 border-stone-700 bg-gradient-to-b from-red-400 via-red-600 to-red-800 shadow-[inset_0_-3px_6px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.35)] ring-1 ring-black/60 transition-all duration-200 group-hover:scale-105 group-hover:from-red-300 group-hover:via-red-500 group-hover:to-red-700 group-hover:shadow-[inset_0_-3px_6px_rgba(0,0,0,0.3),0_2px_8px_rgba(239,68,68,0.35)]">
+        <span className="absolute inset-x-1 top-1 h-2 rounded-full bg-white/35 blur-[1px] transition-colors group-hover:bg-white/50" />
+        <span className="absolute left-1/2 top-1/2 z-10 w-12 -translate-x-1/2 -translate-y-1/2 text-center uppercase leading-none tracking-tight text-white drop-shadow">
+          {translate('::App.Demos')}
+        </span>
+      </span>
+    </button>
+  )
+
   const themeToggle = (
-    <div className="inline-flex items-center rounded-lg p-0.5 shadow-inner shadow-black/10">
+    <div className="inline-flex items-center rounded-lg p-0.5">
       <button
         type="button"
         onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
         aria-pressed={!isDarkMode}
         title="Light mode"
         className={`inline-flex h-8 w-8 xl:w-auto items-center justify-center gap-1.5 px-0 xl:px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
-          !isDarkMode
-            ? 'bg-white text-gray-950'
-            : 'text-gray-300 hover:bg-white/10 hover:text-white'
+          !isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:text-white'
         }`}
       >
         <LuSun size={15} strokeWidth={1.8} />
-        <span className="hidden xl:inline">{translate('::App.Light')}</span>
       </button>
 
       <button
@@ -137,11 +145,10 @@ const PublicLayout = () => {
         aria-pressed={isDarkMode}
         title="Dark mode"
         className={`inline-flex h-8 w-8 xl:w-auto items-center justify-center gap-1.5 px-0 xl:px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
-          isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:bg-white/10 hover:text-white'
+          isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:text-white'
         }`}
       >
         <LuMoon size={15} strokeWidth={1.8} />
-        <span className="hidden xl:inline">{translate('::App.Dark')}</span>
       </button>
     </div>
   )
@@ -221,7 +228,11 @@ const PublicLayout = () => {
 
             {/* Right side: Language + Login */}
             <div className="relative z-10 hidden lg:flex lg:col-start-2 xl:col-start-3 lg:justify-self-end items-center gap-2 xl:gap-3">
-              <LanguageSelector />
+              <div className="inline-flex items-center gap-1">
+                {demoButton('h-9 px-3 rounded-lg')}
+                <div className="w-px h-5 bg-white/20"></div>
+                <LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
+              </div>
               {themeToggle}
               <div className="w-px h-5 bg-white/20" />
               {navLinks
@@ -252,8 +263,10 @@ const PublicLayout = () => {
 
           {/* Mobile Navigation */}
           <div
-            className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${
-              isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'
+            className={`lg:hidden transition-all duration-300 ease-in-out ${
+              isOpen
+                ? 'max-h-screen overflow-visible opacity-100'
+                : 'max-h-0 overflow-hidden opacity-0'
             }`}
           >
             <div className="border-t border-white/10 bg-gray-950/98 backdrop-blur-md">
@@ -314,12 +327,13 @@ const PublicLayout = () => {
                   </div>
                   <div className="mt-1 border-t border-white/10 pt-2 pb-1">
                     <div className="flex items-center justify-between gap-3">
-                      <div className="flex h-10 min-w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
-                        <LanguageSelector />
-                      </div>
-                      <div className="flex h-10 items-center rounded-lg bg-white/5 px-1 ring-1 ring-white/10">
-                        {themeToggle}
+                      <div className="flex items-center gap-1">
+                        {demoButton('h-10 px-3 rounded-lg', toggleMenu)}
+                        <div className="flex h-10 min-w-10 items-center justify-center rounded-lg">
+                          <LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
+                        </div>
                       </div>
+                      <div className="flex h-10 items-center rounded-lg px-1">{themeToggle}</div>
                       {navLinks
                         .filter((l) => isLoginLink(l.resourceKey))
                         .map((link) =>
diff --git a/ui/src/components/template/LanguageSelector.tsx b/ui/src/components/template/LanguageSelector.tsx
index d3f1e2f..ec464ec 100644
--- a/ui/src/components/template/LanguageSelector.tsx
+++ b/ui/src/components/template/LanguageSelector.tsx
@@ -61,7 +61,7 @@ const _LanguageSelector = ({ className }: CommonProps) => {
   }
 
   return (
-    <Dropdown renderTitle={selectedLanguage} placement="bottom-end">
+    <Dropdown renderTitle={selectedLanguage} placement="bottom-start" menuClass="z-[60]">
       {languageList?.map((lang) => (
         <Dropdown.Item
           key={lang.cultureName}