basic design setup

app/assets/stylesheets/application.css

@@ -8,3 +8,205 @@
  *
  * Consider organizing styles into separate files for maintainability.
  */
+
+body {
+  font-family: 'Segoe UI', Arial, sans-serif;
+  background: #f7f7f9;
+  color: #222;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3 {
+  color: #2c3e50;
+  margin-top: 1.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2em 0;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+th, td {
+  padding: 0.75em 1em;
+  border-bottom: 1px solid #eaeaea;
+  text-align: left;
+}
+
+th {
+  background: #f0f4f8;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+form {
+  background: #fff;
+  padding: 2em;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  max-width: 500px;
+  margin: 2em auto;
+}
+
+form label {
+  display: block;
+  margin-bottom: 0.3em;
+  color: #34495e;
+  font-weight: 500;
+}
+
+form input[type="text"],
+form input[type="email"],
+form input[type="number"],
+form input[type="password"],
+form select {
+  width: 100%;
+  padding: 0.5em;
+  margin-bottom: 1em;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #f9fafb;
+  font-size: 1em;
+}
+
+form input[type="submit"], form button, .btn {
+  background: #007bff;
+  color: #fff;
+  border: none;
+  padding: 0.7em 1.5em;
+  border-radius: 4px;
+  font-size: 1em;
+  cursor: pointer;
+  margin-top: 1em;
+  transition: background 0.2s;
+}
+
+form input[type="submit"]:hover, form button:hover, .btn:hover {
+  background: #0056b3;
+}
+
+.notice {
+  background: #e6ffed;
+  color: #256029;
+  border: 1px solid #b7eb8f;
+  padding: 1em;
+  border-radius: 4px;
+  margin: 1em 0;
+}
+
+.error, .alert {
+  background: #fff1f0;
+  color: #a8071a;
+  border: 1px solid #ffa39e;
+  padding: 1em;
+  border-radius: 4px;
+  margin: 1em 0;
+}
+
+fieldset {
+  border: 1px solid #eaeaea;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  padding: 1em;
+  background: #f9fafb;
+}
+
+legend {
+  font-weight: 600;
+  color: #2c3e50;
+  padding: 0 0.5em;
+}
+
+.container {
+  max-width: 95%;
+  margin: 0 auto;
+  padding: 2em 1em;
+}
+
+.navigation {
+  background: #2c3e50;
+  padding: 0.5em 0;
+  margin-bottom: 2em;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.navigation ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.navigation li {
+  margin: 0 1em 0 0;
+}
+
+.navigation a {
+  color: #fff;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5em 1em;
+  border-radius: 4px;
+  transition: background 0.2s, color 0.2s;
+  display: inline-block;
+}
+
+.navigation a:hover, .navigation a.active {
+  background: #007bff;
+  color: #fff;
+}
+
+@media (max-width: 600px) {
+  .navigation ul {
+    flex-direction: column;
+  }
+  .navigation li {
+    margin: 0.5em 0;
+  }
+}
+
+.subprojects {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.subprojects li {
+  margin: 0;
+}
+
+.subprojects a {
+  background: #2c3e50;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5em 1em;
+  border-radius: 4px;
+  transition: background 0.2s, color 0.2s;
+  display: inline-block;
+}
+
+.subprojects a:hover, .subprojects a.active {
+  background: #007bff;
+  color: #fff;
+}

app/views/layouts/application.html.erb

@@ -34,6 +34,8 @@
       </ul>
 
     </div>
-    <%= yield %>
+    <div class="container">
+      <%= yield %>
+    </div>
   </body>
 </html>

app/views/projects/_project.html.erb

@@ -12,7 +12,7 @@
 <% end %>
 <% if project.subprojects.any? %>
 <td>
-  <ul>
+  <ul class="subprojects">
   <% project.subprojects.each do |subproject| %>
     <li>
       <%= link_to "#{subproject.subproject_name}", subproject_path(subproject) %>