diff --git a/views/ngXosViews/serviceGrid/src/css/side-panel.css b/views/ngXosViews/serviceGrid/src/css/side-panel.css
new file mode 100644
index 0000000..3cde922
--- /dev/null
+++ b/views/ngXosViews/serviceGrid/src/css/side-panel.css
@@ -0,0 +1,33 @@
+xos-side-panel .xos-side-panel-content {
+  position: fixed;
+  width: 30%;
+  height: 100%;
+  padding: 25px;
+  background: #fff;
+  overflow: scroll; }
+  xos-side-panel .xos-side-panel-content.right {
+    border-left: 1px solid #555555;
+    top: 0;
+    right: 0;
+    visibility: hidden;
+    box-shadow: -10px 0px 20px -8px rgba(0, 0, 0, 0.75); }
+  xos-side-panel .xos-side-panel-content.right.out {
+    animation: 0.5s slideOutRight ease-in-out;
+    visibility: visible; }
+  xos-side-panel .xos-side-panel-content.right.in {
+    animation: 0.5s slideInRight ease-in-out;
+    visibility: visible; }
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible; }
+  to {
+    transform: translate3d(0, 0, 0); } }
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0); }
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0); } }