From e8ec7919d948d7d98c78271557ac7674d29f9faf Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Mon, 1 Jan 2024 23:39:59 +0100
Subject: [PATCH] Update Design

---
 backend/handlers/tags.go                      |   2 +-
 frontend/package-lock.json                    | 177 +++++++++++++++-
 frontend/package.json                         |   1 +
 frontend/src/api/cards.ts                     |   8 +-
 frontend/src/api/tags.ts                      |  17 ++
 frontend/src/app.html                         |   2 +-
 frontend/src/components/column.svelte         |  89 --------
 frontend/src/components/icons/addIcon.svelte  |  13 ++
 frontend/src/components/icons/viewIcon.svelte |   7 +
 frontend/src/components/modal_card.svelte     |  65 ------
 frontend/src/components/project.svelte        | 108 ----------
 .../components/{ => project/card}/card.svelte |  39 +++-
 .../components/project/card/modal_card.svelte | 171 +++++++++++++++
 .../{ => project/card}/modal_tag.svelte       |  12 +-
 .../{ => project/card}/modal_tags.svelte      |   8 +-
 frontend/src/components/project/column.svelte | 199 ++++++++++++++++++
 frontend/src/components/project/header.svelte |  76 +++++++
 .../src/components/project/project.svelte     |  66 ++++++
 .../{ => projects}/selectProject.svelte       |  53 ++++-
 frontend/src/components/sidebar.svelte        | 124 ++++++++---
 frontend/src/routes/+page.svelte              |  35 ++-
 frontend/src/routes/[project]/+page.svelte    |  32 ++-
 frontend/src/stores/smallStore.ts             |   8 +-
 frontend/static/css/card.css                  |  31 ---
 frontend/static/css/{index.css => global.css} |   9 +
 frontend/static/css/modalCard.css             | 100 ---------
 frontend/static/css/project.css               |   3 -
 frontend/static/css/projects.css              |  72 -------
 frontend/static/css/sidebar.css               |  82 --------
 29 files changed, 986 insertions(+), 623 deletions(-)
 create mode 100644 frontend/src/api/tags.ts
 delete mode 100644 frontend/src/components/column.svelte
 create mode 100644 frontend/src/components/icons/addIcon.svelte
 create mode 100644 frontend/src/components/icons/viewIcon.svelte
 delete mode 100644 frontend/src/components/modal_card.svelte
 delete mode 100644 frontend/src/components/project.svelte
 rename frontend/src/components/{ => project/card}/card.svelte (57%)
 create mode 100644 frontend/src/components/project/card/modal_card.svelte
 rename frontend/src/components/{ => project/card}/modal_tag.svelte (87%)
 rename frontend/src/components/{ => project/card}/modal_tags.svelte (88%)
 create mode 100644 frontend/src/components/project/column.svelte
 create mode 100644 frontend/src/components/project/header.svelte
 create mode 100644 frontend/src/components/project/project.svelte
 rename frontend/src/components/{ => projects}/selectProject.svelte (69%)
 delete mode 100644 frontend/static/css/card.css
 rename frontend/static/css/{index.css => global.css} (62%)
 delete mode 100644 frontend/static/css/modalCard.css
 delete mode 100644 frontend/static/css/project.css
 delete mode 100644 frontend/static/css/projects.css
 delete mode 100644 frontend/static/css/sidebar.css

diff --git a/backend/handlers/tags.go b/backend/handlers/tags.go
index f24d6e5..4da3805 100644
--- a/backend/handlers/tags.go
+++ b/backend/handlers/tags.go
@@ -242,7 +242,7 @@ func UpdateTagOption(c *fiber.Ctx) error {
 		return c.SendStatus(fiber.StatusNotFound)
 	}
 
-	return c.SendStatus(fiber.StatusOK)
+	return c.SendStatus(fiber.StatusNoContent)
 }
 
 func DeleteTagOptions(c *fiber.Ctx) error {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7477813..c623709 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"axios": "^1.6.3",
+				"less": "^4.2.0",
 				"svelte-multiselect": "^10.2.0"
 			},
 			"devDependencies": {
@@ -1432,6 +1433,17 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/copy-anything": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+			"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+			"dependencies": {
+				"is-what": "^3.14.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/mesqueeb"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1557,6 +1569,18 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/errno": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+			"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+			"optional": true,
+			"dependencies": {
+				"prr": "~1.0.1"
+			},
+			"bin": {
+				"errno": "cli.js"
+			}
+		},
 		"node_modules/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -2122,7 +2146,7 @@
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
@@ -2139,6 +2163,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"optional": true,
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -2148,6 +2184,18 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/image-size": {
+			"version": "0.5.5",
+			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+			"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+			"optional": true,
+			"bin": {
+				"image-size": "bin/image-size.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2258,6 +2306,11 @@
 				"@types/estree": "*"
 			}
 		},
+		"node_modules/is-what": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+			"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2318,6 +2371,31 @@
 			"integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
 			"dev": true
 		},
+		"node_modules/less": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+			"integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+			"dependencies": {
+				"copy-anything": "^2.0.1",
+				"parse-node-version": "^1.0.1",
+				"tslib": "^2.3.0"
+			},
+			"bin": {
+				"lessc": "bin/lessc"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"optionalDependencies": {
+				"errno": "^0.1.1",
+				"graceful-fs": "^4.1.2",
+				"image-size": "~0.5.0",
+				"make-dir": "^2.1.0",
+				"mime": "^1.4.1",
+				"needle": "^3.1.0",
+				"source-map": "~0.6.0"
+			}
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2389,6 +2467,28 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/make-dir": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+			"optional": true,
+			"dependencies": {
+				"pify": "^4.0.1",
+				"semver": "^5.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/make-dir/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"optional": true,
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -2416,6 +2516,18 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/mime": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"optional": true,
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/mime-db": {
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2528,6 +2640,22 @@
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 			"dev": true
 		},
+		"node_modules/needle": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+			"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+			"optional": true,
+			"dependencies": {
+				"iconv-lite": "^0.6.3",
+				"sax": "^1.2.4"
+			},
+			"bin": {
+				"needle": "bin/needle"
+			},
+			"engines": {
+				"node": ">= 4.4.x"
+			}
+		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2605,6 +2733,14 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/parse-node-version": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+			"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2669,6 +2805,15 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pify": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+			"optional": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/playwright": {
 			"version": "1.40.1",
 			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz",
@@ -2850,6 +2995,12 @@
 			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
 			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
 		},
+		"node_modules/prr": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+			"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+			"optional": true
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2989,6 +3140,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"optional": true
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -3013,6 +3170,12 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sax": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+			"integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+			"optional": true
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3093,6 +3256,15 @@
 				"sorcery": "bin/sorcery"
 			}
 		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"optional": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -3356,8 +3528,7 @@
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-			"dev": true
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
diff --git a/frontend/package.json b/frontend/package.json
index 14997b5..e57ca14 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -35,6 +35,7 @@
 	"type": "module",
 	"dependencies": {
 		"axios": "^1.6.3",
+		"less": "^4.2.0",
 		"svelte-multiselect": "^10.2.0"
 	}
 }
diff --git a/frontend/src/api/cards.ts b/frontend/src/api/cards.ts
index fd70cb9..7a5ef3b 100644
--- a/frontend/src/api/cards.ts
+++ b/frontend/src/api/cards.ts
@@ -1,8 +1,8 @@
-import type { Card } from '../stores/interfaces';
+import type { Card, TagValue } from '../stores/interfaces';
 import api, { processError } from '../utils/api';
 import status from '../utils/status';
 
-export async function newCardApi(projectId: number): Promise<Card> {
+export async function newCardApi(projectId: number, tags: TagValue[]): Promise<Card> {
 	const response = await api.post(`/v1/cards`, {
 		project_id: projectId,
 		title: 'Untitled',
@@ -16,12 +16,14 @@ export async function newCardApi(projectId: number): Promise<Card> {
 
 	const id: number = response.data.id;
 
+	tags.forEach((tag) => (tag.card_id = id));
+
 	return {
 		id: id,
 		projectId: projectId,
 		title: 'Untitled',
 		content: '',
-		tags: []
+		tags: tags
 	};
 }
 
diff --git a/frontend/src/api/tags.ts b/frontend/src/api/tags.ts
new file mode 100644
index 0000000..3d87fac
--- /dev/null
+++ b/frontend/src/api/tags.ts
@@ -0,0 +1,17 @@
+import type { MeTag, TagOption } from '../stores/interfaces';
+import api, { processError } from '../utils/api';
+import status from '../utils/status';
+
+export async function updateTagAPI(option: TagOption): Promise<boolean> {
+	const response =
+		option.value === ''
+			? await api.delete(`/v1/tags/${option.tag_id}/options/${option.id}`)
+			: await api.put(`/v1/tags/${option.tag_id}/options/${option.id}`, option);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update tag option');
+		return false;
+	}
+
+	return true;
+}
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 4f12515..6df7497 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/img/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" type="text/css" href="/css/index.css" />
+		<link rel="stylesheet" type="text/css" href="/css/global.css" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/frontend/src/components/column.svelte b/frontend/src/components/column.svelte
deleted file mode 100644
index efca83b..0000000
--- a/frontend/src/components/column.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-	import { updateCardTagApi } from '../api/cards';
-	import type { Card, TagOption } from '../stores/interfaces';
-	import { cards, currentDraggedCard } from '../stores/smallStore';
-	import api, { processError } from '../utils/api';
-	import status from '../utils/status';
-	import CardC from './card.svelte';
-
-	export let option: TagOption;
-	export let columnCards: Card[] = [];
-
-	async function onDrop(e: DragEvent) {
-		e.preventDefault();
-		if ($currentDraggedCard && $currentDraggedCard.tags) {
-			for (let tag of $currentDraggedCard.tags) {
-				if (tag.tag_id == option.tag_id) {
-					try {
-						if (tag.option_id == option.id) return;
-						// DELETE
-						if (tag.option_id !== -1 && option.id === -1) {
-							const response = await api.delete(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`);
-
-							if (response.status !== status.NoContent) {
-								processError(response, 'Failed to delete tag');
-								return;
-							}
-						}
-						// CREATE
-						else if (tag.option_id == -1 && option.id !== -1) {
-							const response = await api.post(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
-								value: tag.value,
-								option_id: option.id
-							});
-							if (response.status !== status.Created) {
-								processError(response, 'Failed to create tag');
-								return;
-							}
-						}
-						// UPDATE
-						else {
-							const response = await api.put(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
-								value: tag.value,
-								option_id: option.id
-							});
-							if (response.status !== status.NoContent) {
-								processError(response, 'Failed to update tag');
-								return;
-							}
-						}
-
-						tag.option_id = option.id;
-						cards.reload();
-					} catch (e) {}
-					break;
-				}
-			}
-			currentDraggedCard.set(null);
-		}
-	}
-</script>
-
-<div
-	class="column"
-	role="listbox"
-	tabindex="-1"
-	on:drop={onDrop}
-	on:dragover={(e) => {
-		e.preventDefault();
-	}}
->
-	<h3>{option.value}</h3>
-	<ul>
-		{#each columnCards as card}
-			<CardC {card} />
-		{/each}
-	</ul>
-</div>
-
-<style>
-	h3 {
-		text-align: center;
-	}
-
-	.column {
-		margin: 0 10px;
-		width: 200px;
-		height: 100%;
-	}
-</style>
diff --git a/frontend/src/components/icons/addIcon.svelte b/frontend/src/components/icons/addIcon.svelte
new file mode 100644
index 0000000..754705a
--- /dev/null
+++ b/frontend/src/components/icons/addIcon.svelte
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	viewBox="0 0 24 24"
+	stroke="white"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<line x1="12" y1="7" x2="12" y2="21"></line>
+	<line x1="5" y1="14" x2="19" y2="14"></line>
+</svg>
diff --git a/frontend/src/components/icons/viewIcon.svelte b/frontend/src/components/icons/viewIcon.svelte
new file mode 100644
index 0000000..a1159ea
--- /dev/null
+++ b/frontend/src/components/icons/viewIcon.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"
+	><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		opacity="1"
+		fill="#FFFFFF"
+		d="M128 32h32c17.7 0 32 14.3 32 32V96H96V64c0-17.7 14.3-32 32-32zm64 96V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V388.9c0-34.6 9.4-68.6 27.2-98.3C40.9 267.8 49.7 242.4 53 216L60.5 156c2-16 15.6-28 31.8-28H192zm227.8 0c16.1 0 29.8 12 31.8 28L459 216c3.3 26.4 12.1 51.8 25.8 74.6c17.8 29.7 27.2 63.7 27.2 98.3V448c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V128h99.8zM320 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V96H320V64zm-32 64V288H224V128h64z"
+	/></svg
+>
diff --git a/frontend/src/components/modal_card.svelte b/frontend/src/components/modal_card.svelte
deleted file mode 100644
index 3e9f569..0000000
--- a/frontend/src/components/modal_card.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-	import ModalTags from './modal_tags.svelte';
-	import type { Card } from '../stores/interfaces';
-	import api, { processError } from '../utils/api';
-	import status from '../utils/status';
-	import { cards, currentModalCard } from '../stores/smallStore';
-	import TrashIcon from './icons/trashIcon.svelte';
-	import CloseIcon from './icons/closeIcon.svelte';
-
-	export let card: Card;
-
-	let tempCard: Card = { ...card };
-
-	async function save(closeModal: boolean = true) {
-		if (
-			card.projectId != tempCard.projectId ||
-			card.title !== tempCard.title ||
-			card.content !== tempCard.content
-		) {
-			const response = await api.put(`/v1/cards/${card.id}`, {
-				project_id: tempCard.projectId,
-				title: tempCard.title,
-				content: tempCard.content
-			});
-
-			if (response.status !== status.NoContent) {
-				processError(response, 'Failed to update card');
-				return;
-			}
-
-			card = { ...tempCard };
-		}
-		if (closeModal) currentModalCard.set(-1);
-	}
-</script>
-
-{#if $currentModalCard == card.id}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="modal" on:click={() => save(true)}>
-		<div class="content" on:click|stopPropagation>
-			<div class="header">
-				<input class="title" bind:value={tempCard.title} on:blur={() => save(false)} />
-				<div class="buttons">
-					<button on:click={() => cards.remove(card)}>
-						<TrashIcon />
-					</button>
-					<button on:click={() => currentModalCard.set(-1)}>
-						<CloseIcon />
-					</button>
-				</div>
-			</div>
-			<div class="tags">
-				<ModalTags bind:card />
-			</div>
-			<div class="body">
-				<textarea
-					bind:value={tempCard.content}
-					placeholder="Add a description"
-					on:blur={() => save(false)}
-				/>
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/frontend/src/components/project.svelte b/frontend/src/components/project.svelte
deleted file mode 100644
index 3bcf9f6..0000000
--- a/frontend/src/components/project.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { type Project, type Card, type TagOption, type View } from '../stores/interfaces';
-	import projectTags from '../stores/projectTags';
-	import { getProjectAPI } from '../api/projects';
-	import Column from './column.svelte';
-	import { cards, currentView } from '../stores/smallStore';
-
-	export let projectId: number;
-
-	let project: Project;
-	// let cards: Card[] = [];
-	let view: View | null = null;
-	let columns: { id: number; title: string; cards: Card[] }[] = [];
-
-	onMount(async () => {
-		getProjectAPI(projectId).then((p) => {
-			project = p;
-		});
-
-		cards.init(projectId);
-
-		cards.subscribe((c) => {
-			loadColumns();
-		});
-
-		if (!(await projectTags.init(projectId))) {
-			return;
-		}
-
-		currentView.subscribe((v) => {
-			view = v;
-			loadColumns();
-		});
-	});
-
-	function loadColumns() {
-		if (!view) return;
-		let primary_tag_id = view.primary_tag_id;
-		columns =
-			$projectTags[primary_tag_id]?.options.map((o) => {
-				return {
-					id: o.id,
-					title: o.value,
-					cards: $cards?.filter((c) => c.tags.map((t) => t.option_id).includes(o.id)) || []
-				};
-			}) || [];
-		columns.push({
-			id: -1,
-			title: 'No tag',
-			cards:
-				$cards?.filter((c) => {
-					const tag = c.tags.find((t) => t.tag_id === primary_tag_id);
-					return tag?.option_id == -1;
-				}) || []
-		});
-	}
-
-	async function newCard() {
-		await cards.add(projectId);
-	}
-</script>
-
-<svelte:head>
-	<link rel="stylesheet" type="text/css" href="/css/project.css" />
-	<link rel="stylesheet" type="text/css" href="/css/card.css" />
-	<link rel="stylesheet" type="text/css" href="/css/modalCard.css" />
-</svelte:head>
-
-{#if project}
-	<section>
-		<header>
-			<h2>{project.title}</h2>
-			<button on:click={newCard}>New card</button>
-		</header>
-		{#if view && $projectTags[view.primary_tag_id] && $cards}
-			<div class="grid">
-				{#each $projectTags[view.primary_tag_id].options as option}
-					<Column
-						{option}
-						columnCards={$cards.filter((c) => c.tags.map((t) => t.option_id).includes(option.id))}
-					/>
-				{/each}
-				<Column
-					option={{
-						id: -1,
-						tag_id: view.primary_tag_id,
-						value: `No ${$projectTags[view.primary_tag_id].title}`
-					}}
-					columnCards={$cards.filter((c) => c.tags.find((t) => t.tag_id)?.option_id == -1 || false)}
-				/>
-			</div>
-		{/if}
-	</section>
-{/if}
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.grid {
-		display: flex;
-		flex-direction: row;
-		flex: 1;
-	}
-</style>
diff --git a/frontend/src/components/card.svelte b/frontend/src/components/project/card/card.svelte
similarity index 57%
rename from frontend/src/components/card.svelte
rename to frontend/src/components/project/card/card.svelte
index 6745d04..b5ec9cd 100644
--- a/frontend/src/components/card.svelte
+++ b/frontend/src/components/project/card/card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Card } from '../stores/interfaces';
-	import projectTags from '../stores/projectTags';
-	import { currentDraggedCard, currentModalCard } from '../stores/smallStore';
+	import type { Card } from '../../../stores/interfaces';
+	import projectTags from '../../../stores/projectTags';
+	import { currentModalCard, currentDraggedCard } from '../../../stores/smallStore';
 	import ModalCard from './modal_card.svelte';
 
 	export let card: Card;
@@ -40,3 +40,36 @@
 </div>
 
 <ModalCard bind:card />
+
+<style lang="less">
+	.card {
+		padding: 10px;
+		border-radius: 6px;
+		border: 1px solid #555;
+		font-family: 'Open Sans', sans-serif;
+		font-size: 14px;
+		margin-bottom: 10px;
+	}
+
+	.card:hover {
+		background-color: #303030;
+		cursor: pointer;
+	}
+
+	.card .title {
+		font-weight: normal;
+	}
+
+	.card .tags {
+		padding-top: 10px;
+		font-weight: lighter;
+	}
+
+	.card .tag {
+		padding: 2px 8px;
+		margin: 4px 4px 0 0;
+		text-transform: uppercase;
+		border-radius: 3px;
+		font-size: 90%;
+	}
+</style>
diff --git a/frontend/src/components/project/card/modal_card.svelte b/frontend/src/components/project/card/modal_card.svelte
new file mode 100644
index 0000000..b9080cf
--- /dev/null
+++ b/frontend/src/components/project/card/modal_card.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import type { Card } from '../../../stores/interfaces';
+	import { currentModalCard, cards } from '../../../stores/smallStore';
+	import api, { processError } from '../../../utils/api';
+	import status from '../../../utils/status';
+	import CloseIcon from '../../icons/closeIcon.svelte';
+	import TrashIcon from '../../icons/trashIcon.svelte';
+	import ModalTags from './modal_tags.svelte';
+
+	export let card: Card;
+
+	let tempCard: Card = { ...card };
+
+	async function save(closeModal: boolean = true) {
+		if (
+			card.projectId != tempCard.projectId ||
+			card.title !== tempCard.title ||
+			card.content !== tempCard.content
+		) {
+			const response = await api.put(`/v1/cards/${card.id}`, {
+				project_id: tempCard.projectId,
+				title: tempCard.title,
+				content: tempCard.content
+			});
+
+			if (response.status !== status.NoContent) {
+				processError(response, 'Failed to update card');
+				return;
+			}
+
+			card = { ...tempCard };
+		}
+		if (closeModal) currentModalCard.set(-1);
+	}
+</script>
+
+{#if $currentModalCard == card.id}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="modal" on:click={() => save(true)}>
+		<div class="content" on:click|stopPropagation>
+			<div class="header">
+				<input class="title" bind:value={tempCard.title} on:blur={() => save(false)} />
+				<div class="buttons">
+					<button on:click={() => cards.remove(card)}>
+						<TrashIcon />
+					</button>
+					<button on:click={() => currentModalCard.set(-1)}>
+						<CloseIcon />
+					</button>
+				</div>
+			</div>
+			<div class="tags">
+				<ModalTags bind:card />
+			</div>
+			<div class="body">
+				<textarea
+					bind:value={tempCard.content}
+					placeholder="Add a description"
+					on:blur={() => save(false)}
+				/>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style lang="less">
+	.content {
+	}
+
+	.modal {
+		background-color: rgba(0, 0, 0, 0.8);
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.content {
+			background: #1e1e1e;
+			padding: 20px;
+			border-radius: 8px;
+			max-width: 1000px;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			gap: 30px;
+		}
+	}
+
+	.modal input,
+	.modal textarea {
+		background: none;
+		color: inherit;
+		border: 1px solid #333;
+		border-radius: 7px;
+		padding: 4px;
+	}
+
+	.modal .title {
+		font-size: 24px;
+		font-weight: bold;
+		width: 100%;
+	}
+
+	.modal .header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.modal .buttons {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.modal button {
+		margin-left: 5px;
+		height: 50px;
+		width: 50px;
+		background: none;
+		border: none;
+		border-radius: 10px;
+	}
+
+	.modal button:hover {
+		background-color: #333;
+		cursor: pointer;
+	}
+
+	.modal .buttons button:first-child:hover {
+		background-color: #343;
+	}
+
+	.modal .buttons button:last-child:hover {
+		background-color: #433;
+	}
+
+	.modal .body {
+		margin-bottom: 20px;
+	}
+
+	.modal textarea {
+		width: 100%;
+		min-height: 200px;
+		resize: vertical;
+		font-family: inherit;
+	}
+
+	.modal td {
+		margin-right: 40px;
+	}
+
+	.modal td:first-child {
+		font-weight: bold;
+	}
+
+	.modal td:last-child {
+		margin-right: 0;
+	}
+
+	.modal td button {
+		width: 30px;
+		height: 30px;
+	}
+</style>
diff --git a/frontend/src/components/modal_tag.svelte b/frontend/src/components/project/card/modal_tag.svelte
similarity index 87%
rename from frontend/src/components/modal_tag.svelte
rename to frontend/src/components/project/card/modal_tag.svelte
index 086eab2..e14a7a5 100644
--- a/frontend/src/components/modal_tag.svelte
+++ b/frontend/src/components/project/card/modal_tag.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { TagValue } from '../stores/interfaces';
-	import projectTags from '../stores/projectTags';
-	import api, { processError } from '../utils/api';
-	import status from '../utils/status';
+	import type { TagValue } from '../../../stores/interfaces';
+	import projectTags from '../../../stores/projectTags';
+	import { cards } from '../../../stores/smallStore';
+	import api, { processError } from '../../../utils/api';
+	import status from '../../../utils/status';
 
 	export let tag: TagValue;
-	export let removeTag: (id: number) => void;
+	// export let removeTag: (id: number) => void;
 	let newValue: string = tag.value;
 	let newOption: number = tag.option_id;
 
@@ -47,6 +48,7 @@
 
 		tag.value = newValue;
 		tag.option_id = newOption;
+		cards.reload();
 	}
 
 	async function newTagOption() {
diff --git a/frontend/src/components/modal_tags.svelte b/frontend/src/components/project/card/modal_tags.svelte
similarity index 88%
rename from frontend/src/components/modal_tags.svelte
rename to frontend/src/components/project/card/modal_tags.svelte
index bded95d..40330e6 100644
--- a/frontend/src/components/modal_tags.svelte
+++ b/frontend/src/components/project/card/modal_tags.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import type { Card } from '../../../stores/interfaces';
+	import api, { processError } from '../../../utils/api';
+	import status from '../../../utils/status';
 	import ModalTag from './modal_tag.svelte';
-	import status from '../utils/status';
-	import type { Card } from '../stores/interfaces';
-	import api, { processError } from '../utils/api';
 
 	export let card: Card;
 
@@ -41,7 +41,7 @@
 <table>
 	{#if card.tags}
 		{#each card.tags as tag}
-			<ModalTag bind:tag {removeTag} />
+			<ModalTag bind:tag />
 		{/each}
 	{/if}
 	<tr class="tag">
diff --git a/frontend/src/components/project/column.svelte b/frontend/src/components/project/column.svelte
new file mode 100644
index 0000000..ddf112f
--- /dev/null
+++ b/frontend/src/components/project/column.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+	import type { TagOption, Card, MeTag, TagValue } from '../../stores/interfaces';
+	import { cards, currentDraggedCard } from '../../stores/smallStore';
+	import api, { processError } from '../../utils/api';
+	import status from '../../utils/status';
+	import CardC from './card/card.svelte';
+	import AddIcon from '../icons/addIcon.svelte';
+	import projectTags from '../../stores/projectTags';
+	import { updateTagAPI as updateTagOptionAPI } from '../../api/tags';
+	import { get } from 'svelte/store';
+
+	export let projectId: number;
+	export let editable: boolean = true;
+	export let option: TagOption;
+	export let columnCards: Card[] = [];
+
+	let lastOptionValue = option.value;
+
+	async function onDrop(e: DragEvent) {
+		e.preventDefault();
+		if ($currentDraggedCard && $currentDraggedCard.tags) {
+			for (let tag of $currentDraggedCard.tags) {
+				if (tag.tag_id == option.tag_id) {
+					try {
+						if (tag.option_id == option.id) return;
+						// DELETE
+						if (tag.option_id !== -1 && option.id === -1) {
+							const response = await api.delete(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`);
+
+							if (response.status !== status.NoContent) {
+								processError(response, 'Failed to delete tag');
+								return;
+							}
+						}
+						// CREATE
+						else if (tag.option_id == -1 && option.id !== -1) {
+							const response = await api.post(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
+								value: tag.value,
+								option_id: option.id
+							});
+							if (response.status !== status.Created) {
+								processError(response, 'Failed to create tag');
+								return;
+							}
+						}
+						// UPDATE
+						else {
+							const response = await api.put(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
+								value: tag.value,
+								option_id: option.id
+							});
+							if (response.status !== status.NoContent) {
+								processError(response, 'Failed to update tag');
+								return;
+							}
+						}
+
+						tag.option_id = option.id;
+						cards.reload();
+					} catch (e) {}
+					break;
+				}
+			}
+			currentDraggedCard.set(null);
+		}
+	}
+
+	async function addCard() {
+		const tags: TagValue[] = [];
+		for (let tag of Object.values(get(projectTags))) {
+			tags.push({
+				card_id: -1,
+				tag_id: tag.id,
+				option_id: tag.id === option.tag_id ? option.id : -1,
+				value: ''
+			});
+		}
+
+		await cards.add(projectId, tags);
+	}
+</script>
+
+<div
+	class="column"
+	role="listbox"
+	tabindex="-1"
+	on:drop={onDrop}
+	on:dragover={(e) => {
+		e.preventDefault();
+	}}
+>
+	<header>
+		<input
+			bind:value={option.value}
+			type="text"
+			on:blur={async () => {
+				if (lastOptionValue === option.value) return;
+				await updateTagOptionAPI(option);
+				lastOptionValue = option.value;
+				cards.reload();
+			}}
+			disabled={!editable}
+		/>
+		<span>
+			<span>{columnCards.length}</span>
+			<span
+				class="add"
+				on:click={addCard}
+				role="button"
+				tabindex="0"
+				on:keypress={(e) => {
+					if (e.key === 'Enter') {
+						addCard();
+					}
+				}}
+			>
+				<AddIcon />
+			</span>
+		</span>
+	</header>
+	<ul>
+		{#each columnCards as card}
+			<CardC {card} />
+		{/each}
+	</ul>
+	<div
+		class="addEnd"
+		on:click={addCard}
+		role="button"
+		tabindex="0"
+		on:keypress={(e) => {
+			if (e.key === 'Enter') {
+				addCard();
+			}
+		}}
+	>
+		+
+	</div>
+</div>
+
+<style lang="less">
+	.column {
+		margin: 20px 10px;
+		width: 250px;
+	}
+
+	header {
+		margin-bottom: 20px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		input {
+			background-color: #444;
+			flex: 1;
+			margin-right: 10px;
+			padding: 3px 10px;
+			border-radius: 3px;
+			overflow: hidden;
+			color: inherit;
+			border: none;
+		}
+
+		:last-child {
+			display: flex;
+		}
+
+		.add {
+			cursor: pointer;
+			border-radius: 4px;
+			width: 20px;
+			height: 20px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 10px;
+
+			&:hover {
+				background-color: #fff1;
+			}
+		}
+	}
+
+	.addEnd {
+		cursor: pointer;
+		border-radius: 4px;
+		height: 40px;
+		font-size: 150%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 10px;
+		margin-bottom: 10px;
+
+		&:hover {
+			background-color: #fff1;
+		}
+	}
+</style>
diff --git a/frontend/src/components/project/header.svelte b/frontend/src/components/project/header.svelte
new file mode 100644
index 0000000..3604574
--- /dev/null
+++ b/frontend/src/components/project/header.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+	import type { Project, TagValue } from '../../stores/interfaces';
+	import { cards } from '../../stores/smallStore';
+	import projectTags from '../../stores/projectTags';
+
+	export let project: Project;
+
+	function getEmptyTags(): TagValue[] {
+		const tags: TagValue[] = [];
+		for (let tag of Object.values(get(projectTags))) {
+			tags.push({
+				card_id: -1,
+				tag_id: tag.id,
+				option_id: -1,
+				value: ''
+			});
+		}
+		return tags;
+	}
+</script>
+
+<header>
+	<h2>{project.title}</h2>
+	<nav>
+		<span>Group</span>
+		<span>Sub-group</span>
+		<span>Filter</span>
+		<span>Sort</span>
+		<button on:click={async () => cards.add(project.id, getEmptyTags())}>New</button>
+	</nav>
+</header>
+
+<style lang="less">
+	header {
+		padding: 20px 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 2px solid #444;
+	}
+
+	h2 {
+		font-size: 40px;
+	}
+
+	nav {
+		* {
+			cursor: pointer;
+		}
+
+		span {
+			margin-right: 10px;
+			color: #aaa;
+			padding: 5px 10px;
+			border-radius: 7px;
+
+			&:hover {
+				// background-color: #fff2;
+			}
+		}
+
+		button {
+			background: #324067;
+			color: inherit;
+			border: none;
+			border-radius: 10px;
+			padding: 10px 20px;
+			font-size: inherit;
+
+			&:hover {
+				// background-color: #3a4a77;
+			}
+		}
+	}
+</style>
diff --git a/frontend/src/components/project/project.svelte b/frontend/src/components/project/project.svelte
new file mode 100644
index 0000000..f46813a
--- /dev/null
+++ b/frontend/src/components/project/project.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Column from './column.svelte';
+	import type { Project, View } from '../../stores/interfaces';
+	import projectTags from '../../stores/projectTags';
+	import { cards, currentView } from '../../stores/smallStore';
+	import Header from './header.svelte';
+
+	export let project: Project;
+
+	let view: View | null = null;
+
+	onMount(async () => {
+		await cards.init(project.id);
+
+		if (!(await projectTags.init(project.id))) {
+			return;
+		}
+
+		currentView.subscribe((v) => {
+			view = v;
+		});
+	});
+</script>
+
+{#if project}
+	<section>
+		<Header {project} />
+		{#if view && $projectTags[view.primary_tag_id] && $cards}
+			<div class="grid">
+				{#each $projectTags[view.primary_tag_id].options as option}
+					<Column
+						{option}
+						columnCards={$cards.filter((c) => c.tags.map((t) => t.option_id).includes(option.id))}
+						projectId={project.id}
+					/>
+				{/each}
+				<Column
+					option={{
+						id: -1,
+						tag_id: view.primary_tag_id,
+						value: `No ${$projectTags[view.primary_tag_id].title}`
+					}}
+					columnCards={$cards.filter((c) => c.tags.find((t) => t.tag_id)?.option_id == -1 || false)}
+					projectId={project.id}
+					editable={false}
+				/>
+			</div>
+		{/if}
+	</section>
+{/if}
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		margin: 0 40px;
+	}
+
+	.grid {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+	}
+</style>
diff --git a/frontend/src/components/selectProject.svelte b/frontend/src/components/projects/selectProject.svelte
similarity index 69%
rename from frontend/src/components/selectProject.svelte
rename to frontend/src/components/projects/selectProject.svelte
index 3afcc02..eff758e 100644
--- a/frontend/src/components/selectProject.svelte
+++ b/frontend/src/components/projects/selectProject.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Project } from '../stores/interfaces';
-	import api, { processError } from '../utils/api';
-	import status from '../utils/status';
+	import type { Project } from '../../stores/interfaces';
+	import api, { processError } from '../../utils/api';
+	import status from '../../utils/status';
 
 	export let project: Project;
 	export let deleteProject: (project: Project) => void;
@@ -94,3 +94,50 @@
 		/>
 	</div>
 </li>
+
+<style lang="less">
+	li {
+		cursor: pointer;
+		margin: 10px 0;
+		border: 1px solid #555;
+		border-radius: 4px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.title {
+		font-weight: bold;
+		padding: 20px;
+		width: 100%;
+	}
+
+	.title:hover {
+		background-color: #303030;
+	}
+
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	li img {
+		padding: 20px;
+	}
+
+	li img:hover {
+		background-color: #333;
+	}
+
+	input {
+		padding: 20px;
+		width: 100%;
+		background-color: #333;
+		color: inherit;
+		font-weight: bold;
+		font-size: inherit;
+	}
+</style>
diff --git a/frontend/src/components/sidebar.svelte b/frontend/src/components/sidebar.svelte
index 63569d3..db3c38c 100644
--- a/frontend/src/components/sidebar.svelte
+++ b/frontend/src/components/sidebar.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import api, { processError } from '../utils/api';
-	import type { View } from '../stores/interfaces';
+	import type { Project, View } from '../stores/interfaces';
 	import { currentView } from '../stores/smallStore';
+	import ViewIcon from './icons/viewIcon.svelte';
 
-	export let projectID: number;
+	export let project: Project;
 	let views: View[];
 
 	onMount(async () => {
-		const response = await api.get(`/v1/projects/${projectID}/views`);
+		const response = await api.get(`/v1/projects/${project.id}/views`);
 
 		if (response.status !== 200) {
 			processError(response, 'Failed to fetch views');
@@ -21,30 +22,95 @@
 	});
 </script>
 
-<link rel="stylesheet" type="text/css" href="/css/sidebar.css" />
+<nav>
+	<div>
+		<div id="branding">
+			<span id="title">Focus.</span>
+			<span id="version">v0.0.1</span>
+		</div>
+		<div id="views">
+			{#if views}
+				<h2>{project.title}</h2>
+				<ul>
+					{#each views as view}
+						<li>
+							<ViewIcon />
+							<!-- on:click={() => {
+									currentView.set(view);
+								}} -->
+							<span>
+								{view.title}
+							</span>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+	</div>
+	<div>
+		<div class="separator"></div>
+		<div id="newView" on:click={() => {}}>+ New view</div>
+	</div>
+</nav>
 
-<div id="sidebar" class="sidebar">
-	<div class="logo">
-		<a href="/">
-			<img src="img/icon.svg" alt="" />
-			<span class="title">Focus</span>
-			<span class="version">v0.0.1</span>
-		</a>
-	</div>
-	<div class="boards">
-		<h2>Projects</h2>
-		{#if views}
-			<ul>
-				{#each views as view}
-					<li>
-						<span
-							on:click={() => {
-								currentView.set(view);
-							}}>{view.title}</span
-						>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-</div>
+<style lang="less">
+	nav {
+		min-width: 300px;
+		background-color: #273049;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		font-size: 22px;
+	}
+
+	#branding {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20px;
+
+		#title {
+			font-size: 40px;
+		}
+
+		#version {
+			font-size: 30px;
+			color: #aaa;
+		}
+	}
+
+	#views {
+		h2 {
+			font-weight: normal;
+			font-size: 25px;
+			padding: 20px 10px;
+		}
+
+		ul {
+			font-size: 22px;
+			padding: 10px;
+		}
+
+		span {
+			padding-left: 10px;
+		}
+	}
+
+	.separator {
+		height: 2px;
+		widows: 100%;
+		background-color: #444;
+	}
+
+	#newView {
+		text-align: center;
+		padding: 20px 0;
+	}
+
+	#newView:hover {
+		cursor: pointer;
+		background-color: #fff1;
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 6bf7d18..008caf3 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,7 +3,7 @@
 	import type { Project } from '../stores/interfaces';
 	import { onMount } from 'svelte';
 	import api, { processError } from '../utils/api';
-	import SelectProject from '../components/selectProject.svelte';
+	import SelectProject from '../components/projects/selectProject.svelte';
 
 	let projects: Project[];
 
@@ -46,11 +46,7 @@
 	}
 </script>
 
-<svelte:head>
-	<link rel="stylesheet" type="text/css" href="/css/projects.css" />
-</svelte:head>
-
-<section id="projects">
+<section>
 	<h2>Projects</h2>
 	<ul>
 		{#if projects}
@@ -75,3 +71,30 @@
 </section>
 
 <SvelteToast />
+
+<style lang="less">
+	section {
+		margin: 40px;
+	}
+	h2 {
+		text-align: center;
+		margin-bottom: 40px;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	#add {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		padding: 20px 0;
+		cursor: pointer;
+	}
+
+	#add:hover {
+		background-color: #303030;
+	}
+</style>
diff --git a/frontend/src/routes/[project]/+page.svelte b/frontend/src/routes/[project]/+page.svelte
index 86eead5..87c7474 100644
--- a/frontend/src/routes/[project]/+page.svelte
+++ b/frontend/src/routes/[project]/+page.svelte
@@ -1,23 +1,33 @@
 <script lang="ts">
-	import Project from '../../components/project.svelte';
-	import Sidebar from '../../components/sidebar.svelte';
 	import { page } from '$app/stores';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import type { View } from '../../stores/interfaces';
+	import { onMount } from 'svelte';
+	import { getProjectAPI } from '../../api/projects';
+	import { type Project as P } from '../../stores/interfaces';
+	import Sidebar from '../../components/sidebar.svelte';
+	import Project from '../../components/project/project.svelte';
 
-	let projectID: number = +$page.params.project;
+	let projectId: number = +$page.params.project;
 
-	let currentView: View;
+	let project: P;
+
+	onMount(() => {
+		getProjectAPI(projectId).then((p) => {
+			project = p;
+		});
+	});
 </script>
 
-<div id="projectPage">
-	<Sidebar {projectID} />
-	<Project projectId={projectID} />
-</div>
-<SvelteToast />
+{#if project}
+	<div>
+		<Sidebar {project} />
+		<Project {project} />
+	</div>
+	<SvelteToast />
+{/if}
 
 <style>
-	#projectPage {
+	div {
 		display: flex;
 	}
 </style>
diff --git a/frontend/src/stores/smallStore.ts b/frontend/src/stores/smallStore.ts
index ca19fe3..db4ce1d 100644
--- a/frontend/src/stores/smallStore.ts
+++ b/frontend/src/stores/smallStore.ts
@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { parseCards, type Card, type View } from './interfaces';
+import { parseCards, type Card, type View, type TagValue } from './interfaces';
 import { deleteCardApi, newCardApi } from '../api/cards';
 import { getProjectCardsAPI } from '../api/projects';
 
@@ -19,10 +19,10 @@ export const cards = (() => {
 				set(parseCards(c));
 			});
 		},
-		add: async (projectId: number) => {
-			await newCardApi(projectId).then((card) => {
-				currentModalCard.set(card.id);
+		add: async (projectId: number, tags: TagValue[]) => {
+			await newCardApi(projectId, tags).then((card) => {
 				update((cards) => [...cards, card]);
+				currentModalCard.set(card.id);
 			});
 		},
 		remove: async (card: Card) => {
diff --git a/frontend/static/css/card.css b/frontend/static/css/card.css
deleted file mode 100644
index 0a27bab..0000000
--- a/frontend/static/css/card.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.card {
-    padding: 10px;
-    border-radius: 6px;
-    border: 1px solid #555;
-    margin: 10px;
-    /* width: 200px; */
-    font-family: "Open Sans", sans-serif;
-    font-size: 14px;
-}
-
-.card:hover{
-    background-color: #303030;
-    cursor: pointer;
-}
-
-.card .title {
-    font-weight: normal;
-}
-
-.card .tags {
-    padding-top: 10px;
-    font-weight: lighter;
-}
-
-.card .tag {
-    padding: 2px 8px;
-    margin: 4px 4px 0 0;
-    text-transform: uppercase;
-    border-radius: 3px;
-    font-size: 90%;
-}
\ No newline at end of file
diff --git a/frontend/static/css/index.css b/frontend/static/css/global.css
similarity index 62%
rename from frontend/static/css/index.css
rename to frontend/static/css/global.css
index 4914f78..2d62897 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/global.css
@@ -8,3 +8,12 @@ body {
     color: white;
     background-color: #252525;
 }
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style: none;
+}
\ No newline at end of file
diff --git a/frontend/static/css/modalCard.css b/frontend/static/css/modalCard.css
deleted file mode 100644
index 3c746b9..0000000
--- a/frontend/static/css/modalCard.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.modal {
-    background-color: rgba(0, 0, 0, 0.8);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 1px solid green;
-    display: flex;
-    align-items: center;
-}
-
-.modal .content {
-    background: #1e1e1e;
-    padding: 20px;
-    border-radius: 8px;
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 30px;
-}
-
-.modal input,
-.modal textarea {
-    background: none;
-    color: inherit;
-    border: 1px solid #333;
-    border-radius: 7px;
-    padding: 4px;
-}
-
-.modal .title {
-    font-size: 24px;
-    font-weight: bold;
-    width: 100%;
-}
-
-.modal .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.modal .buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.modal button {
-    margin-left: 5px;
-    height: 50px;
-    width: 50px;
-    background: none;
-    border: none;
-    border-radius: 10px;
-}
-
-.modal button:hover {
-    background-color: #333;
-    cursor: pointer;
-}
-
-.modal .buttons button:first-child:hover {
-    background-color: #343;
-}
-
-.modal .buttons button:last-child:hover {
-    background-color: #433;
-}
-
-.modal .body {
-    margin-bottom: 20px;
-}
-
-.modal textarea {
-    width: 100%;
-    min-height: 200px;
-    resize: vertical;
-    font-family: inherit;
-}
-
-.modal td {
-    margin-right: 40px;
-}
-
-.modal td:first-child {
-    font-weight: bold;
-}
-
-.modal td:last-child {
-    margin-right: 0;
-}
-
-.modal td button {
-    width: 30px;
-    height: 30px;
-}
\ No newline at end of file
diff --git a/frontend/static/css/project.css b/frontend/static/css/project.css
deleted file mode 100644
index ada689f..0000000
--- a/frontend/static/css/project.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#project {
-    padding: 10px 20px;
-}
\ No newline at end of file
diff --git a/frontend/static/css/projects.css b/frontend/static/css/projects.css
deleted file mode 100644
index 29e241a..0000000
--- a/frontend/static/css/projects.css
+++ /dev/null
@@ -1,72 +0,0 @@
-#projects {
-    margin: 40px;
-}
-
-#projects h2 {
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-#projects ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-#projects li {
-    cursor: pointer;
-    margin: 10px 0;
-    border: 1px solid #555;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between
-}
-
-#projects .title {
-    font-weight: bold;
-    padding: 20px;
-    width: 100%;
-}
-
-#projects .title:hover {
-    background-color: #303030;
-}
-
-#projects .buttons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-}
-
-#projects li img {
-    padding: 20px;
-}
-
-#projects li img:hover {
-    background-color: #333;
-}
-
-#projects input {
-    padding: 20px;
-    width: 100%;
-    background-color: #333;
-    color: inherit;
-    font-weight: bold;
-    font-size: inherit;
-}
-
-#projects #add {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding: 20px 0;
-    cursor: pointer;
-}
-
-#projects #add:hover {
-    background-color: #303030;
-}
\ No newline at end of file
diff --git a/frontend/static/css/sidebar.css b/frontend/static/css/sidebar.css
deleted file mode 100644
index f81d80b..0000000
--- a/frontend/static/css/sidebar.css
+++ /dev/null
@@ -1,82 +0,0 @@
-#sidebar {
-    width: 240px;
-    background-color: #262a2b;
-    color: white;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    float: left;
-}
-
-#sidebar .logo {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    margin-top: 20px;
-}
-
-#sidebar .logo img {
-    max-height: 30px;
-    margin-right: 10px;
-}
-
-#sidebar .logo .title {
-    padding-right: 10px;
-}
-#sidebar .logo .version {
-    font-size: 0.8em;
-    opacity: 0.7;
-}
-
-#sidebar .boards h2 {
-    padding-left: 10px;
-    font-size: 0.9em;
-    margin-top: 20px;
-    margin-bottom: 10px;
-}
-
-#sidebar .boards ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-#sidebar a {
-    text-decoration: none;
-    color: white;
-}
-
-#sidebar .boards ul li:hover {
-    background-color: #444;
-}
-
-#sidebar .bottom-links {
-    margin-top: auto;
-}
-
-#sidebar .bottom-links span {
-    text-decoration: none;
-    color: white;
-    display: block;
-    padding: 10px;
-    font-size: 0.9em;
-    border-top: 1px solid #444;
-    cursor: pointer;
-}
-
-#sidebar li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 10px;
-}
-
-#sidebar .edit-icon {
-    visibility: hidden;
-    margin-right: 10px; 
-    cursor: pointer;
-}
-
-#sidebar li:hover .edit-icon {
-    visibility: visible;
-}
\ No newline at end of file