diff --git a/src/routes/projects/+page.css b/src/routes/projects/+page.css
new file mode 100644
index 0000000..2c344f5
--- /dev/null
+++ b/src/routes/projects/+page.css
@@ -0,0 +1,59 @@
+.container {
+ width: 90%;
+}
+
+.project-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
+ gap: 20px;
+ width: 100%;
+}
+
+.project {
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+ cursor: pointer;
+ border: 2px solid var(--project-border-color);
+ min-width: 530px;
+ background-color: var(--background-color);
+}
+
+.search-bar {
+ margin-bottom: 20px;
+ background-color: var(--project-search-background-color);
+ padding: 10px;
+ border-radius: 5px;
+}
+
+.search-bar input {
+ background-color: transparent;
+ border: none;
+ outline: none;
+ color: var(--project-search-input-font-color);
+ font-size: 20px;
+ width: 100%;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-align: center;
+}
+
+.search-bar select {
+ background-color: transparent;
+ border: none;
+ outline: none;
+ color: var(--project-search-input-font-color);
+ font-size: 20px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+@media only screen and (max-width: 620px) {
+ .project-container {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+
+ .project {
+ min-width: 200px;
+ }
+}
\ No newline at end of file
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 9bbc7f1..360a05d 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,6 +1,4 @@