diff --git a/packages/cubby/src/components/Projects.tsx b/packages/cubby/src/components/Projects.tsx
index ac8bec0..00b995b 100644
--- a/packages/cubby/src/components/Projects.tsx
+++ b/packages/cubby/src/components/Projects.tsx
@@ -15,62 +15,7 @@ export function Projects({ projects }: ProjectsProps) {
 
     return (
         <div>
-            <style>
-                {`
-                .project-grid {
-                    display: flex;
-                    flex-wrap: wrap;
-                    gap: 20px;
-                    list-style: none;
-                    padding: 0;
-                }
-                .project-card {
-                    border: 1px solid #ccc;
-                    padding: 15px;
-                    border-radius: 4px;
-                    width: 250px;
-                    position: relative;
-                    padding-bottom: 40px;
-                }
-                .status-icon {
-                    font-size: 12px;
-                    border-bottom: none;
-                    cursor: default;
-                    position: absolute;
-                    top: 15px;
-                    right: 15px;
-                }
-                .project-title {
-                    margin: 0 0 10px 0;
-                    font-size: 16px;
-                    padding-right: 25px;
-                }
-                .project-meta {
-                    font-size: 12px;
-                    margin: 10px 0 0 0;
-                    list-style: none;
-                    padding: 0;
-                }
-                .project-meta li {
-                    margin: 5px 0;
-                }
-                li {
-                    list-style: none !important;
-                }
-                abbr {
-                    border-bottom: none !important;
-                    cursor: default !important;
-                }
-                .last-modified {
-                    color: #666;
-                    font-size: 11px;
-                    position: absolute;
-                    bottom: 15px;
-                    left: 15px;
-                    right: 15px;
-                }
-                `}
-            </style>
+            <link rel="stylesheet" href="/src/css/projects.css" />
             <h1>Projects</h1>
             <ul className="project-grid">
                 {projects.map(project => (
diff --git a/packages/cubby/src/css/projects.css b/packages/cubby/src/css/projects.css
new file mode 100644
index 0000000..114b32c
--- /dev/null
+++ b/packages/cubby/src/css/projects.css
@@ -0,0 +1,61 @@
+.project-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    list-style: none;
+    padding: 0;
+}
+
+.project-card {
+    border: 1px solid #ccc;
+    padding: 15px;
+    border-radius: 4px;
+    width: 250px;
+    position: relative;
+    padding-bottom: 40px;
+}
+
+@media (max-width: 600px) {
+    .project-card {
+        width: 100%;
+    }
+}
+
+.status-icon {
+    font-size: 12px;
+    border-bottom: none !important;
+    cursor: default !important;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+.project-title {
+    margin: 0 0 10px 0;
+    font-size: 16px;
+    padding-right: 25px;
+}
+
+.project-meta {
+    font-size: 12px;
+    margin: 10px 0 0 0;
+    list-style: none;
+    padding: 0;
+}
+
+.project-meta li {
+    margin: 5px 0;
+}
+
+.last-modified {
+    color: #666;
+    font-size: 11px;
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    right: 15px;
+}
+
+li {
+    list-style: none !important;
+}
\ No newline at end of file