UI styling update

app/components/shared/ApplicationsLayout.jsx

@@ -3,20 +3,24 @@
 const ApplicationsLayout = ({ 
   title = "Applications",
   applicationItems = [],
-  backgroundColor = "bg-gray-50",
+  backgroundColor = "bg-teal-50",
   titleColor = "text-gray-700"
 }) => {
   return (
-    <section className={`py-5 lg:py-8 ${backgroundColor}`}>
+    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
       <div className="container-fluid px-4 lg:px-6">
-        <h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
           {title}
         </h2>
         
-        <ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed lg:px-10">
+        <ul className="space-y-4 text-gray-600 leading-relaxed lg:px-6">
           {applicationItems.map((item, index) => (
-            <li key={index} className="text-base">
-              {item}
+            <li key={index} className="flex items-start">
+              <span 
+                className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
+                style={{backgroundColor: '#faae31'}}
+              ></span>
+              <span className="text-base">{item}</span>
             </li>
           ))}
         </ul>