diff --git a/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css b/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css
new file mode 100644
index 0000000..bac6184
--- /dev/null
+++ b/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css
@@ -0,0 +1,86 @@
+/* Organization Chart Level Styles */
+.org-level {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+    margin-top: 20px;
+}
+
+.org-level::before {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 20px;
+    background: #ddd;
+}
+
+.org-level::after {
+    content: '';
+    position: absolute;
+    top: -20px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: #ddd;
+    z-index: 1;
+}
+
+/* Node styles for levels */
+.org-node.child-node {
+    display: inline-block;
+    margin: 0 15px;
+    vertical-align: top;
+}
+
+.org-node.grandchild-node {
+    display: inline-block;
+    margin: 20px 10px 0;
+    vertical-align: top;
+}
+
+/* Connector lines */
+.node-connector {
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 20px;
+    background: #ddd;
+}
+
+/* Responsive adjustments for levels */
+@media (max-width: 768px) {
+    .org-level {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .org-node.child-node {
+        margin: 10px 0;
+    }
+
+    .org-node.grandchild-node {
+        margin: 15px 0 0;
+    }
+}
+
+/* Animation for level expansion */
+.org-level {
+    animation: fadeInLevel 0.3s ease-in-out;
+}
+
+@keyframes fadeInLevel {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
\ No newline at end of file