diff --git a/include/eepp/ui/uihelper.hpp b/include/eepp/ui/uihelper.hpp
index 21b6b4c6b..a2a1b16ea 100644
--- a/include/eepp/ui/uihelper.hpp
+++ b/include/eepp/ui/uihelper.hpp
@@ -26,18 +26,19 @@ enum UI_FLAGS {
 	UI_AUTO_SIZE					= (1 << 4),
 	UI_SKIN_KEEP_SIZE_ON_DRAW		= (1 << 5),
 	UI_FILL_BACKGROUND				= (1 << 6),
-	UI_BORDER						= (1 << 7),
-	UI_TAB_STOP						= (1 << 8),
-	UI_WORD_WRAP					= (1 << 9),
-	UI_MULTI_SELECT					= (1 << 10),
-	UI_AUTO_PADDING					= (1 << 11),
-	UI_DRAG_ENABLE					= (1 << 12),
-	UI_ANCHOR_TOP					= (1 << 13),
-	UI_ANCHOR_BOTTOM				= (1 << 14),
-	UI_ANCHOR_LEFT					= (1 << 15),
-	UI_ANCHOR_RIGHT					= (1 << 16),
-	UI_TOUCH_DRAG_ENABLED			= (1 << 17),
-	UI_TEXT_SELECTION_ENABLED		= (1 << 18)
+	UI_FILL_FOREGROUND				= (1 << 7),
+	UI_BORDER						= (1 << 8),
+	UI_TAB_STOP						= (1 << 9),
+	UI_WORD_WRAP					= (1 << 10),
+	UI_MULTI_SELECT					= (1 << 11),
+	UI_AUTO_PADDING					= (1 << 12),
+	UI_DRAG_ENABLE					= (1 << 13),
+	UI_ANCHOR_TOP					= (1 << 14),
+	UI_ANCHOR_BOTTOM				= (1 << 15),
+	UI_ANCHOR_LEFT					= (1 << 16),
+	UI_ANCHOR_RIGHT					= (1 << 17),
+	UI_TOUCH_DRAG_ENABLED			= (1 << 18),
+	UI_TEXT_SELECTION_ENABLED		= (1 << 19)
 };
 
 enum UI_CONTROL_TYPES {
diff --git a/include/eepp/ui/uinode.hpp b/include/eepp/ui/uinode.hpp
index a08c7860d..0a60862e4 100644
--- a/include/eepp/ui/uinode.hpp
+++ b/include/eepp/ui/uinode.hpp
@@ -86,8 +86,6 @@ class EE_API UINode : public Node {
 
 		UIBackground * setBackgroundFillEnabled( bool enabled );
 
-		UIBorder * setBorderEnabled( bool enabled );
-
 		UINode * setBackgroundDrawable( Drawable * drawable , bool ownIt = false );
 
 		UINode * setBackgroundColor( const Color& color );
@@ -96,6 +94,18 @@ class EE_API UINode : public Node {
 
 		UINode * setBackgroundBlendMode( const BlendMode& blendMode );
 
+		UIBackground * setForegroundFillEnabled( bool enabled );
+
+		UINode * setForegroundDrawable( Drawable * drawable , bool ownIt = false );
+
+		UINode * setForegroundColor( const Color& color );
+
+		UINode * setForegroundCorners( const unsigned int& corners );
+
+		UINode * setForegroundBlendMode( const BlendMode& blendMode );
+
+		UIBorder * setBorderEnabled( bool enabled );
+
 		UINode * setBorderColor( const Color& color );
 
 		UINode * setBorderWidth( const unsigned int& width );
@@ -193,6 +203,7 @@ class EE_API UINode : public Node {
 		Uint32			mFlags;
 		UISkinState *	mSkinState;
 		UIBackground *	mBackground;
+		UIBackground *	mForeground;
 		UIBorder *		mBorder;
 		Vector2f		mDragPoint;
 		Uint32			mDragButton;
@@ -211,6 +222,8 @@ class EE_API UINode : public Node {
 
 		virtual void drawBackground();
 
+		virtual void drawForeground();
+
 		virtual void drawBorder();
 
 		virtual void onThemeLoaded();
diff --git a/src/eepp/ui/uinode.cpp b/src/eepp/ui/uinode.cpp
index ffcc4ee78..259fb7d44 100644
--- a/src/eepp/ui/uinode.cpp
+++ b/src/eepp/ui/uinode.cpp
@@ -32,6 +32,7 @@ UINode::UINode() :
 	mFlags( UI_CONTROL_DEFAULT_FLAGS ),
 	mSkinState( NULL ),
 	mBackground( NULL ),
+	mForeground( NULL ),
 	mBorder( NULL ),
 	mDragButton( EE_BUTTON_LMASK )
 {
@@ -268,6 +269,8 @@ void UINode::draw() {
 		drawBackground();
 
 		drawSkin();
+
+		drawForeground();
 	}
 }
 
@@ -375,22 +378,6 @@ UIBackground * UINode::setBackgroundFillEnabled( bool enabled ) {
 	return mBackground;
 }
 
-UIBorder * UINode::setBorderEnabled( bool enabled ) {
-	writeFlag( UI_BORDER, enabled ? 1 : 0 );
-
-	if ( enabled && NULL == mBorder ) {
-		mBorder = UIBorder::New( this );
-
-		if ( NULL == mBackground ) {
-			mBackground = UIBackground::New( this );
-		}
-	}
-
-	invalidateDraw();
-
-	return mBorder;
-}
-
 UINode * UINode::setBackgroundDrawable( Drawable * drawable, bool ownIt ) {
 	setBackgroundFillEnabled( true )->setDrawable( drawable, ownIt );
 	return this;
@@ -411,6 +398,54 @@ UINode * UINode::setBackgroundBlendMode( const BlendMode& blendMode ) {
 	return this;
 }
 
+UIBackground * UINode::setForegroundFillEnabled( bool enabled ) {
+	writeFlag( UI_FILL_FOREGROUND, enabled ? 1 : 0 );
+
+	if ( enabled && NULL == mForeground ) {
+		mForeground = UIBackground::New( this );
+	}
+
+	invalidateDraw();
+
+	return mForeground;
+}
+
+UINode * UINode::setForegroundDrawable( Drawable * drawable, bool ownIt ) {
+	setForegroundFillEnabled( true )->setDrawable( drawable, ownIt );
+	return this;
+}
+
+UINode * UINode::setForegroundColor( const Color& color ) {
+	setForegroundFillEnabled( true )->setColor( color );
+	return this;
+}
+
+UINode * UINode::setForegroundCorners( const unsigned int& corners ) {
+	setForegroundFillEnabled( true )->setCorners( corners );
+	return this;
+}
+
+UINode * UINode::setForegroundBlendMode( const BlendMode& blendMode ) {
+	setForegroundFillEnabled( true )->setBlendMode( blendMode );
+	return this;
+}
+
+UIBorder * UINode::setBorderEnabled( bool enabled ) {
+	writeFlag( UI_BORDER, enabled ? 1 : 0 );
+
+	if ( enabled && NULL == mBorder ) {
+		mBorder = UIBorder::New( this );
+
+		if ( NULL == mBackground ) {
+			mBackground = UIBackground::New( this );
+		}
+	}
+
+	invalidateDraw();
+
+	return mBorder;
+}
+
 UINode * UINode::setBorderColor( const Color& color ) {
 	setBorderEnabled( true )->setColor( color );
 	return this;
@@ -427,7 +462,10 @@ const Uint32& UINode::getFlags() const {
 
 UINode * UINode::setFlags( const Uint32& flags ) {
 	if ( NULL == mBackground && ( flags & UI_FILL_BACKGROUND ) )
-		mBackground = UIBackground::New( this );
+		setBackgroundFillEnabled( true );
+
+	if ( NULL == mForeground && ( flags & UI_FILL_FOREGROUND ) )
+		setForegroundFillEnabled( true );
 
 	if ( NULL == mBorder && ( flags & UI_BORDER ) )
 		mBorder = UIBorder::New( this );
@@ -463,6 +501,12 @@ void UINode::drawBackground() {
 	}
 }
 
+void UINode::drawForeground() {
+	if ( mFlags & UI_FILL_FOREGROUND ) {
+		mForeground->draw( getScreenBounds(), mAlpha );
+	}
+}
+
 void UINode::drawBorder() {
 	if ( mFlags & UI_BORDER ) {
 		mBorder->draw( getScreenBounds(), mAlpha, mBackground->getCorners() );
diff --git a/src/eepp/ui/uiwidget.cpp b/src/eepp/ui/uiwidget.cpp
index 6f05577cf..4289b904f 100644
--- a/src/eepp/ui/uiwidget.cpp
+++ b/src/eepp/ui/uiwidget.cpp
@@ -489,20 +489,42 @@ bool UIWidget::setAttribute(const NodeAttribute & attribute) {
 	} else if ( "height" == name ) {
 		setInternalHeight( PixelDensity::toDpFromStringI( attribute.asString() ) );
 		notifyLayoutAttrChange();
+	} else if ( "background" == name ) {
+		Drawable * res = NULL;
+
+		const std::string attributeName( attribute.asString() );
+
+		if ( String::startsWith( attributeName, "#" ) ) {
+			setBackgroundColor( Color::fromString( attribute.asString() ) );
+		} else if ( NULL != ( res = DrawableSearcher::searchByName( attributeName ) ) ) {
+			setBackgroundDrawable( res, res->getDrawableType() == Drawable::SPRITE );
+		}
 	} else if ( "backgroundcolor" == name ) {
 		setBackgroundColor( Color::fromString( attribute.asString() ) );
+	} else if ( "backgroundblendmode" == name ) {
+		setBackgroundBlendMode( toBlendMode( attribute.asString() ) );
+	} else if ( "foreground" == name ) {
+		Drawable * res = NULL;
+
+		const std::string attributeName( attribute.asString() );
+
+		if ( String::startsWith( attributeName, "#" ) ) {
+			setForegroundColor( Color::fromString( attribute.asString() ) );
+		} else if ( NULL != ( res = DrawableSearcher::searchByName( attributeName ) ) ) {
+			setForegroundDrawable( res, res->getDrawableType() == Drawable::SPRITE );
+		}
+	} else if ( "foregroundcolor" == name ) {
+		setForegroundColor( Color::fromString( attribute.asString() ) );
+	} else if ( "foregroundblendmode" == name ) {
+		setForegroundBlendMode( toBlendMode( attribute.asString() ) );
+	} else if ( "foregroundcorners" == name ) {
+		setForegroundCorners( attribute.asUint() );
 	} else if ( "bordercolor" == name ) {
 		setBorderColor( Color::fromString( attribute.asString() ) );
 	} else if ( "borderwidth" == name ) {
 		setBorderWidth( PixelDensity::toDpFromStringI( attribute.asString("1") ) );
 	} else if ( "bordercorners" == name || "backgroundcorners" == name ) {
 		setBackgroundCorners( attribute.asUint() );
-	} else if ( "background" == name ) {
-		Drawable * res = NULL;
-
-		if ( NULL != ( res = DrawableSearcher::searchByName( attribute.asString() ) ) ) {
-			setBackgroundDrawable( res, res->getDrawableType() == Drawable::SPRITE );
-		}
 	} else if ( "visible" == name ) {
 		setVisible( attribute.asBool() );
 	} else if ( "enabled" == name ) {
@@ -682,8 +704,6 @@ bool UIWidget::setAttribute(const NodeAttribute & attribute) {
 		setScaleOriginPoint( toOriginPoint( attribute.asString() ) );
 	} else if ( "blendmode" == name ) {
 		setBlendMode( toBlendMode( attribute.asString() ) );
-	} else if ( "backgroundblendmode" == name ) {
-		setBackgroundBlendMode( toBlendMode( attribute.asString() ) );
 	} else if ( "padding" == name ) {
 		int val = PixelDensity::toDpFromStringI( attribute.asString() );
 		setPadding( Rectf( val, val, val, val ) );