diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d5bf4aa..a7c4c44 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,6 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="4a2b45bf-71c5-4c89-bd06-ec97be13fe9d" name="Changes" comment="Community front implemented">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Calendar/Calendar.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Calendar/Calendar.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/Calendar/Calendar.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Calendar/Calendar.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -50,16 +52,16 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "git-widget-placeholder": "master",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/Juanes/OneDrive/Escritorio/Testing-font",
-    "settings.editor.selected.configurable": "org.jetbrains.plugins.github.ui.GithubSettingsConfigurable"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Juanes/OneDrive/Escritorio/Testing-font&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;org.jetbrains.plugins.github.ui.GithubSettingsConfigurable&quot;
   }
-}]]></component>
+}</component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
@@ -139,7 +141,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="master" />
+                        <option value="origin/master" />
                       </list>
                     </value>
                   </entry>
diff --git a/src/pages/Calendar/Calendar.css b/src/pages/Calendar/Calendar.css
index 1d58aee..e184e6c 100644
--- a/src/pages/Calendar/Calendar.css
+++ b/src/pages/Calendar/Calendar.css
@@ -10,14 +10,12 @@
     border-radius: 8px;     
 }
 
-
 .react-calendar__navigation button {
     background-color: transparent; 
     color: #333; 
     font-size: 1rem; 
 }
 
-
 .react-calendar__month-view__days {
     margin-top: 0.5rem;
 }
@@ -26,26 +24,33 @@
     background-color: #A4826D !important;
 }
 
-
+.highlight {
+    background-color: #E1E6F0 !important;
+    border-radius: 50%;
+}
 
 .react-calendar__tile--active {
     background-color: #007bff;
-    color: #fff; 
+    color: #fff;
 }
 
-
 .react-calendar__tile--active:enabled:focus,
 .react-calendar__tile--active:enabled:hover,
 .react-calendar__tile--active:enabled:active {
-    background-color: #86654b; 
+    background-color: #86654b;
 }
 
-
 .react-calendar__tile--now {
     background-color: #A4826D;
-    color: #333; 
+    color: #333;
 }
 
+.highlight-today {
+    background-color: #FFE4B5 !important;
+    border-radius: 50%;
+}
+
+
 
 
 
diff --git a/src/pages/Calendar/Calendar.js b/src/pages/Calendar/Calendar.js
index a2112c8..6498884 100644
--- a/src/pages/Calendar/Calendar.js
+++ b/src/pages/Calendar/Calendar.js
@@ -1,38 +1,64 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom'; 
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import NavBar from '../../components/Navbar/NavBar';
 import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css'; 
+import 'react-calendar/dist/Calendar.css';
 import './Calendar.css';
 import OutfitOfDay from '../../components/OutfitOfDay/OutfitOfDay';
+import apiClient from '../../services/apiClient';
 
 const CalendarPage = () => {
     const [date, setDate] = useState(new Date());
+    const [outfitDates, setOutfitDates] = useState([]);
 
     const onChange = (date) => {
         setDate(date);
     };
 
+    useEffect(() => {
+        const fetchOutfitDates = async () => {
+            try {
+                const response = await apiClient.get('/outfit/dates'); // Cambia la ruta según tu API
+                setOutfitDates(response.data);
+            } catch (error) {
+                console.error('Error fetching outfit dates:', error);
+            }
+        };
+
+        fetchOutfitDates();
+    }, []);
+
+    const tileClassName = ({ date, view }) => {
+        if (view === 'month') {
+            const dateString = date.toISOString().split('T')[0];
+            if (outfitDates.includes(dateString)) {
+                return 'highlight';
+            }
+        }
+        return null;
+    };
+
     return (
         <div className='col-12'>
-            <NavBar/>
-            <div className="row "> 
+            <NavBar />
+            <div className="row calendar-container">
                 <div className="col-10 offset-1 col-sm-10 col-md-4 offset-md-0 col-lg-4 offset-lg-0">
                     <h2 className="text-center">Calendar</h2>
-                    <div className="d-flex justify-content-center"> 
+                    <div className="d-flex justify-content-center">
                         <Calendar
                             onChange={onChange}
                             value={date}
                             locale="en-US"
+                            tileClassName={tileClassName}
                         />
                     </div>
-                    <div className="d-flex justify-content-center mt-3"> 
+                    <div className="d-flex justify-content-center mt-3">
                         <Link to="/">
-                        <button className="btn btn-primary custom-btn">Create Outfit</button> 
+                            <button className="btn btn-primary custom-btn">Create Outfit</button>
                         </Link>
                     </div>
                 </div>
-                <div className="col-10 offset-1 col-sm-10 col-md-7 offset-md-0 col-lg-7 offset-lg-0">                  
+                <div className="col-10 offset-1 col-sm-10 col-md-7 offset-md-0 col-lg-7 offset-lg-0">
                     <OutfitOfDay selectedDate={date} />
                 </div>
             </div>
@@ -41,3 +67,4 @@ const CalendarPage = () => {
 }
 
 export default CalendarPage;
+