diff --git a/lib/ui/widgets/brand/brand_component.dart b/lib/ui/widgets/brand/brand_component.dart
new file mode 100644
index 0000000..3cc2091
--- /dev/null
+++ b/lib/ui/widgets/brand/brand_component.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/brand.model.dart';
+
+class BrandComponent extends StatelessWidget {
+  final Brand brand;
+
+  const BrandComponent({super.key, required this.brand});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Text(
+        brand.name,
+        style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/community_post/community_post_component.dart b/lib/ui/widgets/community_post/community_post_component.dart
new file mode 100644
index 0000000..fb3882d
--- /dev/null
+++ b/lib/ui/widgets/community_post/community_post_component.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/community_post.model.dart';
+import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart';
+
+class CommunityPostComponent extends StatelessWidget {
+  final CommunityPost post;
+
+  const CommunityPostComponent({super.key, required this.post});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (post.userProfile != null)
+            UserProfileComponent(item: post.userProfile!),
+          const SizedBox(height: 8),
+          Text(
+            post.content,
+            style: const TextStyle(fontSize: 16),
+          ),
+          if (post.imageUrl != null)
+            Image.network(post.imageUrl!),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/community_post_comment/community_post_comment_component.dart b/lib/ui/widgets/community_post_comment/community_post_comment_component.dart
new file mode 100644
index 0000000..e22c785
--- /dev/null
+++ b/lib/ui/widgets/community_post_comment/community_post_comment_component.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/community_post_comment.model.dart';
+import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart';
+
+class CommunityPostCommentComponent extends StatelessWidget {
+  final CommunityPostComment comment;
+
+  const CommunityPostCommentComponent({super.key, required this.comment});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (comment.userProfile != null)
+            UserProfileComponent(item: comment.userProfile!),
+          const SizedBox(height: 8),
+          Text(
+            comment.comment,
+            style: const TextStyle(fontSize: 16),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/community_post_like/community_post_like_component.dart b/lib/ui/widgets/community_post_like/community_post_like_component.dart
new file mode 100644
index 0000000..4937cdc
--- /dev/null
+++ b/lib/ui/widgets/community_post_like/community_post_like_component.dart
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/community_post_like.model.dart';
+import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart';
+
+class CommunityPostLikeComponent extends StatelessWidget {
+  final CommunityPostLike like;
+
+  const CommunityPostLikeComponent({super.key, required this.like});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (like.userProfile != null)
+            UserProfileComponent(item: like.userProfile!),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/item_category/item_category_component.dart b/lib/ui/widgets/item_category/item_category_component.dart
new file mode 100644
index 0000000..2741b1b
--- /dev/null
+++ b/lib/ui/widgets/item_category/item_category_component.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/item_category.model.dart';
+
+class ItemCategoryComponent extends StatelessWidget {
+  final ItemCategory itemCategory;
+
+  const ItemCategoryComponent({super.key, required this.itemCategory});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Text(
+        itemCategory.name,
+        style: Theme.of(context).textTheme.headline6,
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/item_metadata/item_metadata_component.dart b/lib/ui/widgets/item_metadata/item_metadata_component.dart
new file mode 100644
index 0000000..503194c
--- /dev/null
+++ b/lib/ui/widgets/item_metadata/item_metadata_component.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/item_metadata.model.dart';
+
+class ItemMetadataComponent extends StatelessWidget {
+  final ItemMetadata item;
+
+  const ItemMetadataComponent({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Item Metadata Details',
+            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(height: 8),
+          Text('Bought For: ${item.boughtFor ?? 'N/A'} ${item.currency}'),
+          Text('Purchase Date: ${item.purchaseDate ?? 'N/A'}'),
+          Text('Condition: ${item.condition ?? 'N/A'}'),
+          Text('Material: ${item.material ?? 'N/A'}'),
+          Text('Size: ${item.size ?? 'N/A'}'),
+          Text('Color: ${item.color ?? 'N/A'}'),
+          Text('Notes: ${item.notes ?? 'N/A'}'),
+          Text('Created At: ${item.createdAt}'),
+          Text('Updated At: ${item.updatedAt}'),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/lookbook_item/lookbook_item_component.dart b/lib/ui/widgets/lookbook_item/lookbook_item_component.dart
new file mode 100644
index 0000000..aa02116
--- /dev/null
+++ b/lib/ui/widgets/lookbook_item/lookbook_item_component.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/lookbook_item.model.dart';
+
+class LookbookItemComponent extends StatelessWidget {
+  final LookbookItem item;
+
+  const LookbookItemComponent({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      constraints: BoxConstraints(maxWidth: 400), // Set max width like a card
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            item.itemId,
+            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            item.itemType,
+            style: TextStyle(fontSize: 16),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            item.createdAt.toString(),
+            style: TextStyle(fontSize: 16),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/outfit_item/outfit_item_component.dart b/lib/ui/widgets/outfit_item/outfit_item_component.dart
new file mode 100644
index 0000000..b275fa9
--- /dev/null
+++ b/lib/ui/widgets/outfit_item/outfit_item_component.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/outfit_item.model.dart';
+
+class OutfitItemComponent extends StatelessWidget {
+  final OutfitItem item;
+
+  const OutfitItemComponent({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      constraints: const BoxConstraints(maxWidth: 400),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            item.outfit.name,
+            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            item.wardrobeItem.imagePath,
+            style: const TextStyle(fontSize: 16),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/use_item/use_item_component.dart b/lib/ui/widgets/use_item/use_item_component.dart
new file mode 100644
index 0000000..7ccaee9
--- /dev/null
+++ b/lib/ui/widgets/use_item/use_item_component.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/use_item.model.dart';
+
+class UseItemComponent extends StatelessWidget {
+  final UseItem item;
+
+  const UseItemComponent({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Used At: ${item.usedAt}',
+            style: const TextStyle(fontSize: 16),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            'Wardrobe Item: ${item.wardrobeItem.id}',
+            style: const TextStyle(fontSize: 16),
+          ),
+          const SizedBox(height: 8),
+          if (item.userProfile != null)
+            Text(
+              'User: ${item.userProfile!.username}',
+              style: const TextStyle(fontSize: 16),
+            ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/use_outfit/use_outfit_component.dart b/lib/ui/widgets/use_outfit/use_outfit_component.dart
new file mode 100644
index 0000000..553a345
--- /dev/null
+++ b/lib/ui/widgets/use_outfit/use_outfit_component.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:openwardrobe/brick/models/use_outfit.model.dart';
+
+class UseOutfitComponent extends StatelessWidget {
+  final UseOutfit item;
+
+  const UseOutfitComponent({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Outfit: ${item.outfit.name}',
+            style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            'Used at: ${item.usedAt}',
+            style: const TextStyle(fontSize: 16),
+          ),
+          const SizedBox(height: 8),
+          if (item.userProfile != null)
+            Text(
+              'User: ${item.userProfile!.username}',
+              style: const TextStyle(fontSize: 16),
+            ),
+        ],
+      ),
+    );
+  }
+}