diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
new file mode 100644
index 0000000..a47a7f5
--- /dev/null
+++ b/frontend/src/utils/utils.ts
@@ -0,0 +1,22 @@
+
+export const DEFAULT_COLOR: string = '#536dfe';
+
+export function gcd(a: number, b: number): number {
+  if (b == 0) return a;
+  return gcd(b, a % b);
+}
+
+export function lcm(a: number, b: number): number {
+  return a / gcd(a, b) * b;
+}
+
+/**
+ * Get Monday-first the day of week from given date instead of Sunday-first.
+ * @param date The date for getting weekday.
+ * @returns The zero-based weekday. 0 stands for Monday.
+ */
+export function getWeekday(date: Date): number {
+  let day = date.getDay();
+  if (day == 0) return 6;
+  else return day - 1;
+}
diff --git a/frontend/src/views/Collection.vue b/frontend/src/views/Collection.vue
index 075c923..633541e 100644
--- a/frontend/src/views/Collection.vue
+++ b/frontend/src/views/Collection.vue
@@ -7,11 +7,11 @@ import {
   getFullOwn as apiCollectionGetFullOwn,
   getSharing as apiCollectionGetSharing,
   getDetailOwn as apiCollectionGetDetailOwn,
-  type CollectionRow,
   deleteOwn as apiCollectionDeleteOwn,
   updateOwn as apiCollectionUpdateOwn,
   addSharing as apiCollectionAddSharing,
-  deleteSharing as apiCollectionDeleteSharing
+  deleteSharing as apiCollectionDeleteSharing,
+  type CollectionRow,
 } from '@/api/collection';
 import OwnedItem from '@/components/collection/OwnedItem.vue';
 import SharingItem from '@/components/collection/SharingItem.vue';
@@ -251,4 +251,16 @@ const deleteSharingItem = async (username: string) => {
   <MessageBox ref="messagebox" />
 </template>
 
-<style scoped></style>
+<style scoped>
+div.control-list {
+  display: flex; 
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
+div.control-list > * {
+  margin-right: 0.75rem;
+  margin-bottom: 0.75rem;
+  margin-left: 0 !important;
+}
+</style>