diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
index cbcd933..c767f9d 100644
--- a/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -7362,6 +7362,24 @@
             "tr": "Demo Talep Formu",
             "en": "Demo Request Form"
         },
+        {
+            "resourceName": "Platform",
+            "key": "Public.demo.newDemo",
+            "tr": "Yeni Demo Talebi",
+            "en": "New Demo Request"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "Public.demo.thankYou",
+            "tr": "Teşekkürler!",
+            "en": "Thank You!"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "Public.demo.resultMessage",
+            "tr": "Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri dönüş yapacağız.",
+            "en": "Your demo request has been submitted successfully. We will get back to you within 24 hours."
+        },
         {
             "resourceName": "Platform",
             "key": "Public.demo.users",
diff --git a/ui/src/components/orders/ProductCard.tsx b/ui/src/components/orders/ProductCard.tsx
index 0018cbb..71903e3 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 dark:bg-gray-700 dark:text-gray-400 ${
+                className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform dark:bg-gray-700 dark:text-gray-400  dark:hover:bg-gray-600 dark:hover:text-white ${
                   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/form/notes/NoteList.tsx b/ui/src/views/form/notes/NoteList.tsx
index ecaebcd..599c4e9 100644
--- a/ui/src/views/form/notes/NoteList.tsx
+++ b/ui/src/views/form/notes/NoteList.tsx
@@ -328,9 +328,9 @@ export const NoteList: React.FC<NoteListProps> = ({
       <Tabs
         value={currentTab}
         onChange={(val) => setCurrentTab(val as 'notes' | 'audit')}
-        variant="pill"
+        variant="underline"
       >
-        <TabList className="mb-4 bg-gray-50 p-1 rounded-lg">
+        <TabList className="mb-4 border-0 dark:bg-gray-800">
           <TabNav value="notes">
             {translate('::ListForms.ListForm.Notes')}
             <Badge className="ml-2 bg-blue-500" content={`${notes?.length ?? 0}`} />
@@ -344,7 +344,7 @@ export const NoteList: React.FC<NoteListProps> = ({
         <TabContent value="notes">
           <div className="flex items-center justify-end mb-2">
             <Button
-              variant="solid"
+              variant="default"
               size="sm"
               icon={<FaPlus className="mr-1" />}
               type="button"
@@ -371,7 +371,7 @@ export const NoteList: React.FC<NoteListProps> = ({
                 return (
                   <div
                     key={note.id || index}
-                    className={`relative bg-white border-l-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 ${border}`}
+                    className={`relative bg-white border-l-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 dark:bg-gray-900 dark:border-purple-600 ${border}`}
                   >
                     {/* Timeline Düğmesi */}
                     <div className="absolute -left-7 top-4 bg-white rounded-full border-2 border-gray-300 p-2">
@@ -382,7 +382,7 @@ export const NoteList: React.FC<NoteListProps> = ({
                       {/* Header */}
                       <div className="flex justify-between items-start">
                         <div>
-                          <div className="flex items-center gap-1 text-sm font-semibold text-gray-800">
+                          <div className="flex items-center gap-1 text-sm font-semibold text-gray-800 dark:text-gray-200">
                             <Avatar
                               size={25}
                               shape="circle"
@@ -424,7 +424,7 @@ export const NoteList: React.FC<NoteListProps> = ({
                           {files.map((file: any, index: number) => (
                             <div
                               key={index}
-                              className="group flex items-center gap-2 bg-gray-50 border border-gray-200 px-2 py-1 rounded-md text-xs text-gray-600 hover:bg-gray-100 transition"
+                              className="group flex items-center gap-2 bg-gray-50 border border-gray-200 px-2 py-1 rounded-md text-xs text-gray-600 hover:bg-gray-100 transition dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 cursor-pointer"
                             >
                               <FaPaperclip className="text-blue-500" />
                               <span className="truncate max-w-[150px]">{file.FileName}</span>
@@ -524,7 +524,7 @@ export const NoteList: React.FC<NoteListProps> = ({
                 return (
                   <div
                     key={log.id}
-                    className="relative bg-white border-l-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border-purple-400"
+                    className="relative bg-white border-l-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border-purple-400 dark:bg-gray-900 dark:border-purple-600"
                   >
                     <div className="absolute -left-7 top-4 bg-white rounded-full border-2 border-gray-300 p-2">
                       <FaHistory className="text-purple-600" />
@@ -533,7 +533,7 @@ export const NoteList: React.FC<NoteListProps> = ({
                     <div className="p-4">
                       <div className="flex items-start justify-between gap-2">
                         <div className="min-w-0">
-                          <div className="flex items-center gap-1 text-sm font-semibold text-gray-800">
+                          <div className="flex items-center gap-1 text-sm font-semibold text-gray-800 dark:text-gray-200">
                             <Avatar
                               size={25}
                               shape="circle"
diff --git a/ui/src/views/form/notes/NoteModal.tsx b/ui/src/views/form/notes/NoteModal.tsx
index dba2f1f..a365d09 100644
--- a/ui/src/views/form/notes/NoteModal.tsx
+++ b/ui/src/views/form/notes/NoteModal.tsx
@@ -116,11 +116,7 @@ function NoteModalContent({
                   {types.map((t) => (
                     <label
                       key={t.value}
-                      className={`flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer transition-all duration-200 ${
-                        values.type === t.value
-                          ? 'border-purple-500 bg-purple-50 text-purple-700'
-                          : 'border-gray-300 hover:border-purple-400'
-                      }`}
+                      className="flex items-center gap-2 px-2 py-1 text-black rounded-md cursor-pointer transition-all duration-200 dark:bg-gray-800 dark:text-gray-300"
                     >
                       <Radio
                         value={t.value}
@@ -170,11 +166,7 @@ function NoteModalContent({
                         <Item name="redo" />
                         <Item name="separator" />
                         <Item name="size" acceptedValues={sizeValues} options={fontSizeOptions} />
-                        <Item
-                          name="font"
-                          acceptedValues={fontValues}
-                          options={fontFamilyOptions}
-                        />
+                        <Item name="font" acceptedValues={fontValues} options={fontFamilyOptions} />
                         <Item name="separator" />
                         <Item name="bold" />
                         <Item name="italic" />
@@ -184,11 +176,7 @@ function NoteModalContent({
                         <Item name="orderedList" />
                         <Item name="bulletList" />
                         <Item name="separator" />
-                        <Item
-                          name="header"
-                          acceptedValues={headerValues}
-                          options={headerOptions}
-                        />
+                        <Item name="header" acceptedValues={headerValues} options={headerOptions} />
                         <Item name="separator" />
                         <Item name="color" />
                         <Item name="background" />
diff --git a/ui/src/views/form/notes/NotePanel.tsx b/ui/src/views/form/notes/NotePanel.tsx
index b136e54..3673f98 100644
--- a/ui/src/views/form/notes/NotePanel.tsx
+++ b/ui/src/views/form/notes/NotePanel.tsx
@@ -147,19 +147,19 @@ export const NotePanel: React.FC<NotePanelProps> = ({
 
       {/* Panel */}
       <div
-        className={`fixed right-0 top-0 h-full bg-white border-l border-gray-300 shadow-xl transform transition-transform duration-300 ease-in-out z-30 ${isVisible ? 'translate-x-0' : 'translate-x-full'}`}
+        className={`fixed right-0 top-0 h-full bg-white border-l border-gray-500 shadow-xl transform transition-transform duration-300 ease-in-out z-30 dark:bg-gray-800 ${isVisible ? 'translate-x-0' : 'translate-x-full'}`}
         style={{ width: '450px' }}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex flex-col h-full">
-          <div className="p-2 border-b border-gray-200 bg-gray-50">
+          <div className="p-2 border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700">
             {/* Üst Satır: Başlık, Kayıt Bilgisi Toggle ve Kapat Butonu */}
             <div className="flex items-center justify-between mx-1 my-1">
               <div className="flex flex-col gap-1 text-sm text-gray-700">
-                <span className="font-medium">{entityName}</span>
+                <span className="font-medium text-black dark:text-white">{entityName}</span>
 
-                <code className="bg-gray-100 py-1 rounded text-gray-800 text-xs font-mono w-fit">
-                  <Badge className="bg-blue-100 text-blue-600" content={entityId} />
+                <code className="py-1 rounded text-gray-800 text-xs font-mono w-fit">
+                  <Badge className="bg-blue-100 text-blue-600 dark:bg-blue-600 dark:text-blue-100" content={entityId} />
                 </code>
               </div>
 
diff --git a/ui/src/views/public/About.tsx b/ui/src/views/public/About.tsx
index bea45f0..2d44e36 100644
--- a/ui/src/views/public/About.tsx
+++ b/ui/src/views/public/About.tsx
@@ -261,7 +261,7 @@ function buildAboutContent(
         styleClass: resolveLocalizedValue(
           translate,
           `Public.about.dynamic.description.${index + 1}.styleClass`,
-          index % 2 === 0 ? '' : 'text-center p-5 text-blue-800',
+          index % 2 === 0 ? '' : 'text-center p-5 text-blue-800 dark:text-white',
         ),
       })) ?? [],
     sections:
diff --git a/ui/src/views/public/Demo.tsx b/ui/src/views/public/Demo.tsx
index b6f68ea..47e76ff 100644
--- a/ui/src/views/public/Demo.tsx
+++ b/ui/src/views/public/Demo.tsx
@@ -123,11 +123,10 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               <FaCheckCircle className="w-8 h-8 text-white" />
             </div>
             <h2 className="text-2xl font-bold text-gray-800 mb-4 dark:text-gray-100">
-              Teşekkürler!
+              {translate('::Public.demo.thankYou')}
             </h2>
             <p className="text-gray-600 mb-6 dark:text-gray-300">
-              Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri
-              dönüş yapacağız.
+              {translate('::Public.demo.resultMessage')}
             </p>
             <button
               onClick={() => {
@@ -146,7 +145,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
               }}
               className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-all duration-300"
             >
-              Yeni Talep Gönder
+              {translate('::Public.demo.newDemo')}
             </button>
           </div>
         </div>
@@ -163,6 +162,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
       <div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative dark:bg-gray-900">
         <button
           onClick={onClose}
+          title="Kapat"
+          aria-label="Kapat"
           className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
         >
           &times;
@@ -172,6 +173,15 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
           onSubmit={handleSubmit}
           className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100 dark:border-gray-700 dark:bg-gray-900"
         >
+          <div className="mb-6 pr-10">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              {translate('::Public.demo.title')}
+            </h2>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              {translate('::Public.demo.subtitle')}
+            </p>
+          </div>
+
           <div className="space-y-3">
             {/* Organization Name */}
             <div>
@@ -268,7 +278,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                 {translate('::App.Address')} *
               </label>
               <div className="relative">
-                <FaMapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <FaMapPin className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
                 <textarea
                   name="address"
                   value={formData.address}
@@ -342,7 +352,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
                   name="message"
                   value={formData.message}
                   onChange={handleInputChange}
-                  rows={4}
+                  rows={3}
                   className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
                     errors.message
                       ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
diff --git a/ui/src/views/public/Services.tsx b/ui/src/views/public/Services.tsx
index 9da5a4c..ac0262b 100644
--- a/ui/src/views/public/Services.tsx
+++ b/ui/src/views/public/Services.tsx
@@ -215,7 +215,7 @@ function buildServicesContent(
     supportButtonStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_SUPPORT_BUTTON_STYLE_KEY,
-      'block text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors',
+      'block text-center bg-blue-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white',
     ),
     supportItems: services
       .filter((item) => item.type === 'support')
@@ -252,13 +252,13 @@ function buildServicesContent(
     ctaSectionStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_SECTION_STYLE_KEY,
-      'bg-blue-900 text-white py-16',
+      'bg-blue-900 text-white py-16 dark:bg-gray-800',
     ),
     ctaTitleStyleClassKey: SERVICES_CTA_TITLE_STYLE_KEY,
     ctaTitleStyleClass: resolveLocalizedValue(
       translate,
       SERVICES_CTA_TITLE_STYLE_KEY,
-      'text-3xl font-bold mb-6 text-white',
+      'text-3xl font-bold mb-6 text-white dark:text-gray-300',
     ),
     ctaDescription: resolveLocalizedValue(translate, SERVICES_CTA_DESCRIPTION_KEY),
     ctaDescriptionKey: SERVICES_CTA_DESCRIPTION_KEY,
@@ -1035,7 +1035,7 @@ const Services: React.FC = () => {
         isDesignMode={isDesignMode}
         onSelect={handleSelectBlock}
       >
-        <div className={content?.ctaSectionStyleClass || 'bg-blue-900 text-white py-16 dark:bg-gray-800'}>
+        <div className={content?.ctaSectionStyleClass || 'bg-blue-900 text-white py-16'}>
           <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>