diff --git a/frontend/src/commons/utils.ts b/frontend/src/commons/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..072df5429d216c2ca100b088e09e6bef9656b951
--- /dev/null
+++ b/frontend/src/commons/utils.ts
@@ -0,0 +1,6 @@
+export const getHumanSize = (size: number) => {
+  if (size < 1000) return `${size} B`;
+  if (size < 1000000) return `${(size / 1000).toFixed(1)} kB`;
+  if (size < 1000000000) return `${(size / 1000000).toFixed(1)} MB`;
+  if (size < 1000000000000) return `${(size / 1000000000).toFixed(1)} GB`;
+}
diff --git a/frontend/src/models/bucket.ts b/frontend/src/models/bucket.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfece9866433cf406af56a016ecbad62bbce81dd
--- /dev/null
+++ b/frontend/src/models/bucket.ts
@@ -0,0 +1,13 @@
+export type RWAccess = {
+  read: boolean
+  write: boolean
+}
+
+export type BucketInfo = {
+  name: string,
+  creation_date: string;
+  detail: Object
+  rw_access: RWAccess
+  objects: number,
+  size: number
+}
diff --git a/frontend/src/routes/Buckets/index.tsx b/frontend/src/routes/Buckets/index.tsx
index 4dad0ce7bb86feb8dd2b6e634c9f0b84741c3585..6aa62d23f3821fb326af89132b57a7972c940f99 100644
--- a/frontend/src/routes/Buckets/index.tsx
+++ b/frontend/src/routes/Buckets/index.tsx
@@ -1,31 +1,11 @@
 import { useState } from 'react';
 import { Page } from '../../components/Page';
 import APIService from "../../services/APIService";
-
-type RWAccess = {
-  read: boolean
-  write: boolean
-}
-
-type BucketInfo = {
-  name: string,
-  creation_date: string;
-  detail: Object
-  rw_access: RWAccess
-  objects: number,
-  size: number
-}
-
-const getHumanSize = (size: number) => {
-  if (size < 1000) return `${size} B`;
-  if (size < 1000000) return `${(size / 1000).toFixed(1)} kB`;
-  if (size < 1000000000) return `${(size / 1000000).toFixed(1)} MB`;
-  if (size < 1000000000000) return `${(size / 1000000000).toFixed(1)} GB`;
-}
+import { getHumanSize } from '../../commons/utils';
+import { BucketInfo } from '../../models/bucket';
 
 const BucketView = (bucketInfo: BucketInfo) => {
   const creationDate = new Date(bucketInfo.creation_date);
-  const size_byte = bucketInfo.size;
   return (
     <div className="bg-slate-100 w-2/3 mb-4 p-4 rounded-lg">
       <h1 className="text-2xl font-bold mb-2">{bucketInfo.name}</h1>
@@ -50,7 +30,6 @@ export const Buckets = () => {
       });
   }
 
-
   return (
     <Page title='Buckets'>
       {buckestList ? buckestList.map(bucketInfo =>