diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
new file mode 100644
index 0000000..75d3c5e
--- /dev/null
+++ b/app/common/styles/elements/accordion.scss
@@ -0,0 +1,58 @@
+
+// Accordion
+
+#header__actions-bar {
+  padding-top: 1em;
+  padding-right: 1em;
+  background: $medgrey;
+  margin-left: 0;
+
+  .event__actions {
+    margin-top: 1em;
+    margin-right: 10px;
+    @include mediaQuery(medium) {
+      margin-top: 0;
+    }
+    @include mediaQuery(large) {
+      margin-right: -20px;
+    }
+  }
+
+}
+
+.accord-trigger {
+  transform: rotate(90deg);
+  font-size: 1.5em;
+  color: lighten($darkgrey, 10%);
+  padding: .3em;
+  display: block;
+  margin: 0 auto;
+  transition: all .2s ease;
+  &:after {
+    content: '\276F'
+  }
+  &.active {
+    transform: rotate(-90deg);
+    color: $darkbg__accent;
+  }
+  &:focus {
+    outline: 0;
+    color: $darkbg__accent;
+  }
+}
+
+// Single event log card
+.accord-row {
+  position: relative;
+  border-top: 1px solid $lightgrey;
+  padding: 1em 1em 1em 0em;
+  background: $lightblue;
+  overflow: hidden;
+  &.active,
+  &.selected {
+    background: $white;
+  }
+  &:hover {
+    background: $white;
+  }
+}
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
new file mode 100644
index 0000000..800dd98
--- /dev/null
+++ b/app/common/styles/elements/content-search.scss
@@ -0,0 +1,57 @@
+
+// content search
+
+.content__search {
+  width: 100%;
+  max-width: 99%;
+  display: inline-block;
+  position: relative;
+  margin-right: 1em;
+  margin-top: .5em;
+  @media (min-width: 1333px) {
+    max-width: 60%;
+    margin-top: 0;
+  }
+  #content__search-input {
+    margin: 0;
+    border: 0;
+    border-bottom: 2px solid $lightgrey;
+    padding-left: 40px;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  label {
+    position: absolute;
+    text-indent: -9999px;
+    height:20px;
+    width: 20px;
+    left: 10px;
+    top: 25px;
+    transform: translateY(-50%);
+    background: url("../assets/images/icon-search.svg") center center no-repeat;
+    opacity: .6;
+  }
+
+  #event__search-submit {
+    position: absolute;
+    top: .5em;
+    right: 0;
+    padding: 8px;
+    min-height: 20px;
+    max-width: 70px;
+    text-align: center;
+    margin: 0;
+  }
+
+  .tag-filter-label {
+    text-transform: uppercase;
+    color: $darkgrey;
+    font-size: .7em;
+    font-weight: 700;
+    min-height: 20px;
+    line-height:1.3;
+    margin-top: .5em;
+    text-align: right;
+  }
+}//end event-log__search
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 6277a91..11c4968 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,4 +3,7 @@
 @import "status";
 @import "alerts";
 @import "tags";
-@import "inline-confirm";
\ No newline at end of file
+@import "inline-confirm";
+@import "accordion";
+@import "content-search";
+@import "paginate";
\ No newline at end of file
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index cb4c7e3..f2da19e 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -3,6 +3,7 @@
 .inline__confirm {
   position: absolute;
   top: 0;
+  right: 0;
   transform: translateY(-103%);
   width: 100%;
   height: 100%;
@@ -12,6 +13,7 @@
   color: $white;
   padding: 2em 2em 1.55em 2em;
   overflow: hidden;
+  @include fastTransition-all;
   &.active {
     transform: translateY(0);
     @include fastTransition-all;
@@ -20,6 +22,10 @@
 
 // Power confirmation buttons
 .inline__confirm-buttons {
+  position: absolute;
+  top: 50%;
+  right: 1em;
+  transform: translateY(-50%);
   .btn-primary {
     background: transparent;
     border: 2px solid $white;
@@ -32,7 +38,7 @@
       border: 2px solid $primebtn__bg;
     }
   }
-  @include mediaQuery(large) {
+  @include mediaQuery(medium) {
     float: right;
   }
 }
@@ -40,6 +46,7 @@
 // confirmation message
 .inline__confirm-message {
   display: inline-block;
+  max-width: 50%;
 }
 
 // Power confirmation message icon
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
new file mode 100644
index 0000000..2df88cc
--- /dev/null
+++ b/app/common/styles/elements/paginate.scss
@@ -0,0 +1,149 @@
+.pagination,
+.pagination li a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.pagination li { background-color: transparent; list-style-type: none; }
+
+.pagination a {
+  font-weight: 300;
+  padding-top: 1px;
+  text-decoration:none;
+  border: 1px solid $medgrey;
+  border-left-width: 0;
+  min-width:44px;
+  min-height:44px;
+  color: $darkbg__primary;
+}
+
+.pagination li:not([class*="current"]) a:hover {
+  background-color: $primebtn__bg;
+  color: $white;
+}
+
+.pagination li:not([class*="current"]) a:focus,
+.pagination li:not([class*="current"]) a:active {;
+  //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+  border-left-width:1px;
+}
+
+.pagination li:first-of-type a {
+  border-left-width: 1px;
+}
+
+.pagination li:first-of-type span,
+.pagination li:last-of-type span,
+.pagination li:nth-of-type(2) span,
+.pagination li:nth-last-of-type(2) span {
+  /* screen readers only */
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after,
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after {
+  display: inline-block;
+  text-rendering: auto;
+  font-size: 1.3em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after { content: "\027A0"; }
+
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after { content: "\0279E"; }
+
+.pagination li:first-child a::before,
+.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
+
+.pagination li.current a {
+  padding-top:.25em;
+  color: $white;
+  background-color: $lightbg__primary;
+  cursor: default;
+  pointer-events: none;
+  font-weight: 700;
+}
+
+@media only screen and ( max-width: 64.063em ) {
+  .pagination li:first-child,
+  .pagination li:last-child {
+    /* screen readers only */
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 40.063em ) {
+  .pagination li {
+    /* screen readers only */
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .pagination li.current,
+  .pagination li:first-of-type,
+  .pagination li:last-of-type,
+  .pagination li:nth-of-type(2),
+  .pagination li:nth-last-of-type(2){
+    position: initial;
+    top: initial;
+    left: initial;
+  }
+
+  .pagination li:nth-of-type(2) a { border-left-width: 0; }
+
+}
+
+@media only screen and ( max-width: 30.063em ) {
+
+  h1 { font-size: 1.35em !important; }
+
+  .pagination li:first-child,
+  .pagination li:last-child {
+    /* screen readers only */
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 15.063em ) {  /* For watches? */
+
+  .pagination li { width: 50%;}
+
+  .pagination li.current {
+    -webkit-box-ordinal-group: 3;
+    -ms-flex-order: 2;
+    order: 2;
+    width: 100%;
+    border-left-width: 1px;
+
+  }
+
+}
\ No newline at end of file