diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 67d5f8335..ad2adaf27 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -7,6 +7,7 @@
 - **Modal** - `onHide` callback can now cancel event by returning false #3168 **Thanks @mdehoog**
 - **Dropdown** - Added `onLabelRemove` callback that allows value removal to be cancelled by callback **Thanks @goloveychuk**
 - **Table** - Added `selectable` on table cell, allowing for full table-cell links
+- **Popup** Added three new variables for `arrow` background color based on position, top, center or bottom. This makes it easier to use gradient backgrounds with popups and still match arrow colors.
 
 **Bugs**
 - **Divider/Step/Modal/AD** - Fixes 1px jump at `@mobileBreakpoint` caused by incorrect edge conditions in media query #3180 **THanks @mdehoog**
@@ -19,6 +20,7 @@
 - **Grid** - Fixes some inconsistencies with `widescreen only` class #3161 **Thanks @mdehoog**
 - **Search** - Fixes `url` parameter not working correctly due to typo in source **Thanks @fabienb4**
 - **Dimmer** - Dimmer can now works correctly with `opacity: 0` #3167 **Thanks @mdehoog**
+- **Segment** - Fixes border on `horizontal segment` when they are `:first-child` inside `segments` group
 
 ### Version 2.1.4 - Sep 13, 2015
 
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 0e3f9da6e..a52dcbf2c 100755
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -370,6 +370,11 @@
   box-shadow: none;
   border-left: @borderWidth solid @borderColor;
 }
+
+/* Border Fixes */
+.ui.segments > .horizontal.segments:first-child {
+  border-top: none;
+}
 .ui.horizontal.segments > .segment:first-child {
   border-left: none;
 }
diff --git a/src/definitions/modules/popup.less b/src/definitions/modules/popup.less
index dd68819e4..60cd330c6 100755
--- a/src/definitions/modules/popup.less
+++ b/src/definitions/modules/popup.less
@@ -38,7 +38,7 @@
   border: @border;
   line-height: @lineHeight;
   max-width: @maxWidth;
-  background-color: @background;
+  background: @background;
 
   padding: @verticalPadding @horizontalPadding;
   font-weight: @fontWeight;
@@ -216,6 +216,31 @@
   box-shadow: @rightArrowBoxShadow;
 }
 
+/* Arrow Color By Location */
+.ui.bottom.popup:before {
+  background: @arrowTopBackground;
+}
+.ui.right.center.popup:before,
+.ui.left.center.popup:before {
+  background: @arrowCenterBackground;
+}
+.ui.top.popup:before {
+  background: @arrowBottomBackground;
+}
+
+/* Inverted Arrow Color */
+.ui.inverted.bottom.popup:before {
+  background: @invertedArrowTopBackground;
+}
+.ui.inverted.right.center.popup:before,
+.ui.inverted.left.center.popup:before {
+  background: @invertedArrowCenterBackground;
+}
+.ui.inverted.top.popup:before {
+  background: @invertedArrowBottomBackground;
+}
+
+
 /*******************************
             Coupling
 *******************************/
diff --git a/src/themes/default/modules/popup.variables b/src/themes/default/modules/popup.variables
index 2c31ebae0..fd524786c 100644
--- a/src/themes/default/modules/popup.variables
+++ b/src/themes/default/modules/popup.variables
@@ -51,6 +51,11 @@
 @arrowStroke: @borderWidth;
 @arrowColor: darken(@borderColor, 10);
 
+/* Arrow color by position */
+@arrowTopBackground: @arrowBackground;
+@arrowCenterBackground: @arrowBackground;
+@arrowBottomBackground: @arrowBackground;
+
 @arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
 @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
 @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
@@ -86,4 +91,9 @@
 
 @invertedHeaderBackground: none;
 @invertedHeaderColor: @white;
-@invertedArrowColor: @invertedBackground;
\ No newline at end of file
+@invertedArrowColor: @invertedBackground;
+
+/* Arrow color by position */
+@invertedArrowTopBackground: @invertedBackground;
+@invertedArrowCenterBackground: @invertedBackground;
+@invertedArrowBottomBackground: @invertedBackground;