diff --git a/.astro/data-store.json b/.astro/data-store.json
index a929187..b1ea832 100644
--- a/.astro/data-store.json
+++ b/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.15.9","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
diff --git a/.astro/settings.json b/.astro/settings.json
index 09eaa37..8d02825 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1759260475499
+		"lastUpdateCheck": 1769452569553
 	}
 }
\ No newline at end of file
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 03d7cc4..f964fe0 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index b765d70..ca75d54 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -77,8 +77,190 @@ const { projectLink, logoLink, name, description, tags = [], loadIssues = false
 
   .Card-Container:hover::before {
     opacity: 1;
+  }---
+import IssueList from './IssueList.astro';
+
+export interface Props {
+  projectLink: string;
+  logoLink: string;
+  name: string;
+  description: string;
+  tags?: string[];
+  loadIssues?: boolean;
+}
+
+const { projectLink, logoLink, name, description, tags = [], loadIssues = false } = Astro.props;
+---
+
+<div class="Card-Container">
+  <div class="Card-Real-Link">
+    <div class="Card-Header">
+      <img
+        class="Project-Logo"
+        alt="the framework or language that the project is build upon"
+        src={logoLink}
+        onerror="this.src='/default.png'"
+        width="60"
+        height="60"
+      />
+      <p class="Card-Title">{name}</p>
+    </div>
+
+    <div class="Card-Body">
+      <div class="Card-Tag">
+        {tags.map((tag) => (
+          <div key={tag}>
+            <p>{tag}</p>
+          </div>
+        ))}
+      </div>
+
+      <div class="Card-Description">
+        <p>{description}</p>
+      </div>
+
+      {loadIssues && (
+        <IssueList projectLink={projectLink} projectName={name} />
+      )}
+    </div>
+
+    <!-- ✅ ONLY navigation link -->
+    <a
+      class="Card-Link"
+      href={projectLink}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span>Go to Project</span>
+    </a>
+  </div>
+</div>
+
+<style>
+  .Card-Container {
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    min-height: 200px;
+    margin-bottom: 1.5rem;
+    position: relative;
   }
 
+  .Card-Container::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(102, 126, 234, 0.1),
+      rgba(118, 75, 162, 0.1)
+    );
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    pointer-events: none;
+  }
+
+  .Card-Container:hover::before {
+    opacity: 1;
+  }
+
+  .Card-Container:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .Card-Real-Link {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  .Card-Header {
+    padding: 1.5rem 1.5rem 1rem;
+    text-align: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .Project-Logo {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+  }
+
+  .Card-Title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: white;
+    margin: 0;
+  }
+
+  .Card-Body {
+    padding: 1rem 1.5rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .Card-Tag {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .Card-Tag p {
+    background: rgba(102, 126, 234, 0.2);
+    color: #a5b4fc;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    margin: 0;
+    border: 1px solid rgba(102, 126, 234, 0.3);
+  }
+
+  .Card-Description {
+    flex-grow: 1;
+  }
+
+  .Card-Description p {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .Card-Link {
+    background: linear-gradient(
+      135deg,
+      rgba(102, 126, 234, 0.8),
+      rgba(118, 75, 162, 0.8)
+    );
+    color: white;
+    text-align: center;
+    padding: 0.875rem;
+    font-weight: 600;
+    margin: 1rem;
+    border-radius: 12px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+  }
+
+  .Card-Link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+  }
+</style>
+
+
   .Card-Container:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);