diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index 3cef8ae..cbcd933 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -10288,7 +10288,7 @@
             "resourceName": "Platform",
             "key": "App.About",
             "tr": "Hakkımızda",
-            "en": "About Us"
+            "en": "About"
         },
         {
             "resourceName": "Platform",
diff --git a/api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs b/api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
index 73ba4d6..1c4bc66 100644
--- a/api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
+++ b/api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
@@ -525,10 +525,26 @@ public class PlatformHttpApiHostModule : AbpModule
         app.UseConfiguredEndpoints();
     }
 
-    public override async Task OnPostApplicationInitializationAsync(ApplicationInitializationContext context)
+    public override Task OnPostApplicationInitializationAsync(ApplicationInitializationContext context)
     {
-        using var scope = context.ServiceProvider.CreateScope();
-        var initializer = scope.ServiceProvider.GetRequiredService<BackgroundWorkerInitializer>();
-        await initializer.RunAsync();
+        var serviceProvider = context.ServiceProvider;
+
+        _ = Task.Run(async () =>
+        {
+            using var scope = serviceProvider.CreateScope();
+            var logger = scope.ServiceProvider.GetRequiredService<ILogger<PlatformHttpApiHostModule>>();
+
+            try
+            {
+                var initializer = scope.ServiceProvider.GetRequiredService<BackgroundWorkerInitializer>();
+                await initializer.RunAsync();
+            }
+            catch (Exception ex)
+            {
+                logger.LogError(ex, "Background worker initialization failed.");
+            }
+        });
+
+        return Task.CompletedTask;
     }
 }
diff --git a/ui/src/components/layouts/PublicLayout.tsx b/ui/src/components/layouts/PublicLayout.tsx
index 73e001f..24ff9f4 100644
--- a/ui/src/components/layouts/PublicLayout.tsx
+++ b/ui/src/components/layouts/PublicLayout.tsx
@@ -121,14 +121,14 @@ const PublicLayout = () => {
         onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
         aria-pressed={!isDarkMode}
         title="Light mode"
-        className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
+        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'
         }`}
       >
         <LuSun size={15} strokeWidth={1.8} />
-        {translate('::App.Light')}
+        <span className="hidden xl:inline">{translate('::App.Light')}</span>
       </button>
 
       <button
@@ -136,12 +136,12 @@ const PublicLayout = () => {
         onClick={() => setThemeMode(THEME_ENUM.MODE_DARK)}
         aria-pressed={isDarkMode}
         title="Dark mode"
-        className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
+        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'
         }`}
       >
         <LuMoon size={15} strokeWidth={1.8} />
-        {translate('::App.Dark')}
+        <span className="hidden xl:inline">{translate('::App.Dark')}</span>
       </button>
     </div>
   )
@@ -163,11 +163,15 @@ const PublicLayout = () => {
               : 'bg-gray-950/80 backdrop-blur-sm py-4 border-b border-white/5'
           }`}
         >
-          <div className="container mx-auto px-6 flex items-center justify-between">
-            <Logo mode="dark" />
+          <div className="container mx-auto px-6 relative grid grid-cols-[auto_1fr_auto] items-center lg:grid-cols-[1fr_auto] xl:grid-cols-[auto_1fr_auto]">
+            <Logo
+              mode="dark"
+              className="relative z-10 max-w-[190px] overflow-hidden lg:hidden xl:block xl:max-w-none"
+              imgClass="h-10 w-auto object-contain xl:h-auto"
+            />
 
-            {/* Desktop Navigation */}
-            <nav className="hidden md:flex items-center gap-1">
+            {/* Desktop / tablet navigation */}
+            <nav className="hidden lg:flex lg:col-start-1 xl:col-start-2 items-center justify-self-start xl:justify-self-center gap-1">
               {navLinks
                 .filter((l) => !isLoginLink(l.resourceKey))
                 .map((link) => {
@@ -216,7 +220,7 @@ const PublicLayout = () => {
             </nav>
 
             {/* Right side: Language + Login */}
-            <div className="hidden md:flex items-center gap-3">
+            <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 />
               {themeToggle}
               <div className="w-px h-5 bg-white/20" />
@@ -237,9 +241,10 @@ const PublicLayout = () => {
 
             {/* Mobile Menu Button */}
             <button
-              className="md:hidden flex items-center justify-center w-9 h-9 text-white rounded-md hover:bg-white/10 transition-colors"
+              className="lg:hidden col-start-3 justify-self-end flex items-center justify-center w-9 h-9 text-white rounded-md hover:bg-white/10 transition-colors"
               onClick={toggleMenu}
               aria-label="Toggle menu"
+              aria-expanded={isOpen}
             >
               {isOpen ? <LuX size={20} strokeWidth={2} /> : <LuMenu size={20} strokeWidth={2} />}
             </button>
@@ -247,68 +252,88 @@ const PublicLayout = () => {
 
           {/* Mobile Navigation */}
           <div
-            className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
+            className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${
               isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'
             }`}
           >
-            <div className="bg-gray-950/98 backdrop-blur-md border-t border-white/10">
+            <div className="border-t border-white/10 bg-gray-950/98 backdrop-blur-md">
               <div className="container mx-auto px-6 py-3">
                 <nav className="flex flex-col gap-1">
-                  {navLinks.map((link) => {
-                    const active = isActiveLink(link.path)
-                    const isLogin = isLoginLink(link.resourceKey)
-                    if (isLogin) {
+                  <div className="lg:hidden flex flex-col gap-1">
+                    {navLinks.map((link) => {
+                      const active = isActiveLink(link.path)
+                      const isLogin = isLoginLink(link.resourceKey)
+                      if (isLogin) {
+                        return link.path ? (
+                          <Link
+                            key={link.path}
+                            to={link.path}
+                            onClick={toggleMenu}
+                            className="mt-2 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
+                          >
+                            {link.name}
+                          </Link>
+                        ) : null
+                      }
                       return link.path ? (
                         <Link
                           key={link.path}
                           to={link.path}
                           onClick={toggleMenu}
-                          className="mt-2 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
+                          className={`flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium rounded-md transition-colors ${
+                            active
+                              ? 'bg-white/10 text-white'
+                              : 'text-gray-300 hover:bg-white/5 hover:text-white'
+                          }`}
                         >
+                          {link.icon && (
+                            <link.icon
+                              size={16}
+                              strokeWidth={1.75}
+                              className={active ? 'text-blue-400' : 'text-gray-400'}
+                            />
+                          )}
                           {link.name}
                         </Link>
-                      ) : null
-                    }
-                    return link.path ? (
-                      <Link
-                        key={link.path}
-                        to={link.path}
-                        onClick={toggleMenu}
-                        className={`flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium rounded-md transition-colors ${
-                          active
-                            ? 'bg-white/10 text-white'
-                            : 'text-gray-300 hover:bg-white/5 hover:text-white'
-                        }`}
-                      >
-                        {link.icon && (
-                          <link.icon
-                            size={16}
-                            strokeWidth={1.75}
-                            className={active ? 'text-blue-400' : 'text-gray-400'}
-                          />
-                        )}
-                        {link.name}
-                      </Link>
-                    ) : (
-                      <button
-                        key={link.name}
-                        onClick={() => {
-                          link.action?.()
-                          toggleMenu()
-                        }}
-                        className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
-                      >
-                        {link.icon && (
-                          <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
-                        )}
-                        {link.name}
-                      </button>
-                    )
-                  })}
-                  <div className="pt-2 pb-1 border-t border-white/10 mt-1">
+                      ) : (
+                        <button
+                          key={link.name}
+                          onClick={() => {
+                            link.action?.()
+                            toggleMenu()
+                          }}
+                          className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
+                        >
+                          {link.icon && (
+                            <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
+                          )}
+                          {link.name}
+                        </button>
+                      )
+                    })}
+                  </div>
+                  <div className="mt-1 border-t border-white/10 pt-2 pb-1">
                     <div className="flex items-center justify-between gap-3">
-                      <LanguageSelector />
-                      {themeToggle}
+                      <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>
+                      {navLinks
+                        .filter((l) => isLoginLink(l.resourceKey))
+                        .map((link) =>
+                          link.path ? (
+                            <Link
+                              key={link.path}
+                              to={link.path}
+                              onClick={toggleMenu}
+                              className="hidden h-10 lg:inline-flex items-center justify-center px-4 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shadow-md shadow-blue-900/30 transition-colors"
+                            >
+                              {link.name}
+                            </Link>
+                          ) : null,
+                        )}
                     </div>
                   </div>
                 </nav>
diff --git a/ui/src/components/orders/ProductCard.tsx b/ui/src/components/orders/ProductCard.tsx
index 359ac70..0018cbb 100644
--- a/ui/src/components/orders/ProductCard.tsx
+++ b/ui/src/components/orders/ProductCard.tsx
@@ -168,7 +168,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               <button
                 onClick={handleAddToCart}
                 disabled={isDisabled}
-                className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform ${
+                className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform dark:bg-gray-700 dark:text-gray-400 ${
                   isDisabled
                     ? 'bg-gray-400 text-gray-700 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
                     : 'bg-blue-600 hover:bg-blue-700 text-white hover:scale-[1.02] active:scale-[0.98]'
diff --git a/ui/src/views/public/Blog.tsx b/ui/src/views/public/Blog.tsx
index b55a755..5e11235 100644
--- a/ui/src/views/public/Blog.tsx
+++ b/ui/src/views/public/Blog.tsx
@@ -131,7 +131,7 @@ const Blog = () => {
                 onClick={() => handleCategoryChange('')}
                 className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
                   selectedCategory === ''
-                    ? 'bg-blue-600 text-white'
+                    ? 'bg-blue-600 text-black'
                     : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
                 }`}
               >
@@ -170,7 +170,7 @@ const Blog = () => {
                       alt={post.title}
                       className="object-cover w-full h-48"
                     />
-                    <div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
+                    <div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm dark:bg-blue-900">
                       {translate('::Public.' + post.category.name)}
                     </div>
                   </div>
@@ -267,7 +267,7 @@ const Blog = () => {
               placeholder={translate('::Abp.Account.EmailAddress')}
               className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
             />
-            <Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+            <Button className="bg-blue-600 text-black px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors dark:bg-blue-500 dark:hover:bg-blue-600">
               {translate('::Public.common.subscribe')}
             </Button>
           </div>
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index 5f0d8f1..b6f68ea 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -269,11 +269,11 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               </label>
               <div className="relative">
                 <FaMapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                <input
-                  type="text"
+                <textarea
                   name="address"
                   value={formData.address}
                   onChange={handleInputChange}
+                  rows={3}
                   className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
                     errors.address
                       ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
diff --git a/ui/src/views/public/Home.tsx b/ui/src/views/public/Home.tsx
index c9a15b5..bb06c7a 100644
--- a/ui/src/views/public/Home.tsx
+++ b/ui/src/views/public/Home.tsx
@@ -1178,7 +1178,7 @@ const Home: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-      <section className="bg-blue-600 py-16">
+      <section className="bg-blue-900 py-16 dark:bg-gray-800">
         <div className="container mx-auto px-4 text-center">
           <h2 className={content?.ctaTitleStyle}>{content?.ctaTitle}</h2>
           <p className={content?.ctaSubtitleStyle}>{content?.ctaSubtitle}</p>
diff --git a/ui/src/views/public/Products.tsx b/ui/src/views/public/Products.tsx
index ce254e3..566a45d 100644
--- a/ui/src/views/public/Products.tsx
+++ b/ui/src/views/public/Products.tsx
@@ -83,7 +83,7 @@ const Products: React.FC = () => {
       ></Helmet>
 
       {/* Hero Section */}
-      <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950"></div>
+      <div className="relative bg-blue-900 py-14 text-white dark:bg-gray-950"></div>
 
       <div className="container mx-auto px-4 pt-4">
         <BillingControls
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index 1d50bcd..9da5a4c 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -1035,7 +1035,7 @@ const Services: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-        <div className={content?.ctaSectionStyleClass || 'bg-blue-900 text-white py-16'}>
+        <div className={content?.ctaSectionStyleClass || 'bg-blue-900 text-white py-16 dark:bg-gray-800'}>
           <div className="container mx-auto px-4 text-center">
             <h2 className={content?.ctaTitleStyleClass || 'text-3xl font-bold mb-6 text-white'}>{content?.ctaTitle}</h2>
             <p className={content?.ctaDescriptionStyleClass || 'text-xl mb-8 max-w-2xl mx-auto'}>{content?.ctaDescription}</p>