diff --git a/src/components/ContributionCalendar.jsx b/src/components/ContributionCalendar.jsx
new file mode 100644
index 0000000..77180ce
--- /dev/null
+++ b/src/components/ContributionCalendar.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+// Helper to get all days in the last 52 weeks
+function getCalendarDays() {
+  const days = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  // Go back 51 weeks (to get 52 weeks total)
+  const start = new Date(today);
+  start.setDate(start.getDate() - (7 * 51 + today.getDay()));
+  for (let i = 0; i < 7 * 52; i++) {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    days.push(d);
+  }
+  return days;
+}
+
+// Color scale (GitHub-like)
+const COLORS = [
+  '#ebedf0', // 0
+  '#c6e48b', // 1
+  '#7bc96f', // 2
+  '#239a3b', // 3
+  '#196127', // 4+
+];
+function getColor(count) {
+  if (!count) return COLORS[0];
+  if (count >= 4) return COLORS[4];
+  return COLORS[count];
+}
+
+export default function ContributionCalendar({ data }) {
+  const days = getCalendarDays();
+  // Get max count for scaling (optional, for more dynamic color)
+  // const max = Math.max(...Object.values(data));
+
+  return (
+    <div style={{ overflowX: 'auto' }}>
+      <div style={{ display: 'flex' }}>
+        {/* Weeks (columns) */}
+        {Array.from({ length: 52 }).map((_, weekIdx) => (
+          <div key={weekIdx} style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* Days (rows) */}
+            {Array.from({ length: 7 }).map((_, dayIdx) => {
+              const day = days[weekIdx * 7 + dayIdx];
+              const dateStr = day.toISOString().slice(0, 10);
+              const count = data[dateStr] || 0;
+              return (
+                <div
+                  key={dateStr}
+                  title={`${dateStr}: ${count} contribution${count === 1 ? '' : 's'}`}
+                  style={{
+                    width: 12,
+                    height: 12,
+                    margin: 1,
+                    background: getColor(count),
+                    borderRadius: 2,
+                  }}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
+        <span>Less</span>
+        {COLORS.map((color, i) => (
+          <span key={i} style={{ display: 'inline-block', width: 12, height: 12, background: color, margin: '0 2px', borderRadius: 2 }} />
+        ))}
+        <span>More</span>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/development.astro b/src/pages/development.astro
index b88e7fd..7e50591 100644
--- a/src/pages/development.astro
+++ b/src/pages/development.astro
@@ -7,12 +7,21 @@ const lang = Astro.params.lang || 'en';
 const t = getTranslation(lang);
 
 // Fetch Git repository data at build time
-const GITEA_COMMITS_URL = 'https://git.365devnet.eu/api/v1/repos/365DevNet/365devnet/commits';
+const GITEA_COMMITS_URL = 'https://git.365devnet.eu/api/v1/repos/365DevNet/365devnet/commits?sha=main&stat=true&verification=true&files=true';
 
 // Fetch commits data
 let commits: any[] = [];
 try {
-  const commitsResponse = await fetch(GITEA_COMMITS_URL);
+  const headers: Record<string, string> = {
+    'accept': 'application/json',
+  };
+  // Use Authorization header if token is present
+  if (import.meta.env.GITEA_TOKEN) {
+    headers['Authorization'] = `token ${import.meta.env.GITEA_TOKEN}`;
+  }
+  const commitsResponse = await fetch(GITEA_COMMITS_URL, {
+    headers,
+  });
 
   if (commitsResponse.ok) {
     commits = await commitsResponse.json();
@@ -40,22 +49,30 @@ const formatDate = (dateString: string) => {
     <div class="space-y-8">
       <section>
         <h2 class="text-2xl font-semibold mb-4">{t.development.latestCommits || 'Latest Commits'}</h2>
-        {commits.length > 0 ? (
+        {Array.isArray(commits) && commits.length > 0 ? (
           <div class="space-y-4">
             {commits.slice(0, 10).map((commit) => (
               <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
                 <div class="flex justify-between items-start">
                   <div>
-                    <h3 class="font-medium">{commit.title}</h3>
-                    <p class="text-sm text-gray-600 dark:text-gray-400">{commit.message}</p>
+                    <h3 class="font-medium">{commit.commit?.message?.split('\n')[0] || 'No message'}</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">{commit.commit?.message || ''}</p>
                   </div>
-                  <span class="text-sm text-gray-500">{formatDate(commit.committed_date)}</span>
+                  <span class="text-sm text-gray-500">{commit.commit?.author?.date ? formatDate(commit.commit.author.date) : ''}</span>
                 </div>
                 <div class="mt-2 text-sm">
-                  <span class="text-gray-500">Commit:</span>{" "}
-                  <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
-                    {commit.id.slice(0, 7)}
-                  </code>
+                  <span class="text-gray-500">Commit:</span>{' '}
+                  {commit.html_url ? (
+                    <a href={commit.html_url} target="_blank" rel="noopener">
+                      <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                        {commit.sha ? commit.sha.slice(0, 7) : ''}
+                      </code>
+                    </a>
+                  ) : (
+                    <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                      {commit.sha ? commit.sha.slice(0, 7) : ''}
+                    </code>
+                  )}
                 </div>
               </div>
             ))}