diff --git a/src/views/shared/badge-image/BadgeImage.scss b/src/views/shared/badge-image/BadgeImage.scss
index d7067045..b08e2de8 100644
--- a/src/views/shared/badge-image/BadgeImage.scss
+++ b/src/views/shared/badge-image/BadgeImage.scss
@@ -1,7 +1,7 @@
 .badge-image {
     position: relative;
-    width: 100%;
-    height: 100%;
+    width: 45px;
+    height: 45px;
     background-repeat: no-repeat;
     background-position: center;
     
diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
index cba4e091..13e84199 100644
--- a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
+++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { BadgesContainerViewProps } from './BadgesContainerView.types';
 
@@ -7,21 +8,36 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
     const { badges = null } = props;
 
     return (
-        <div className="row badge-container d-flex mt-1">
-            <div className="nitro-card-grid theme-default">
-                <div className="row row-cols-5 align-content-start">
-                {
-                    badges.map( (badge, index) => 
-{
-                        return (
-                        <div className="grid-item-container" key={index}>
-                            <BadgeImageView badgeCode={badge}/>
-                        </div>
-                        )
-                    })
-                }
-                </div>
-            </div>
+        <div className="row">
+            <NitroCardGridView columns={ 5 }>
+                { badges && (badges.length > 0) && badges.map((badge, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index }>
+                                    <BadgeImageView badgeCode={ badge }/>
+                                </NitroCardGridItemView>
+                            )
+                        }) }
+            </NitroCardGridView>
         </div>
-    );
+    )
+
+//     return (
+//         <div className="row badge-container d-flex mt-1">
+//             <div className="nitro-card-grid theme-default">
+//                 <div className="row row-cols-5 align-content-start">
+//                 {
+//                     badges.map( (badge, index) => 
+// {
+//                         return (
+//                         <div className="grid-item-container" key={index}>
+//                             <BadgeImageView badgeCode={badge}/>
+//                         </div>
+//                         )
+//                     })
+//                 }
+//                 </div>
+//             </div>
+//         </div>
+//     );
 }