diff --git a/README.md b/README.md
index 05a7d98..9dbde46 100644
--- a/README.md
+++ b/README.md
@@ -222,47 +222,18 @@ It will render to something like this (depending on your colorscheme):
 
 ![c1](./doc/custom_components/1.png)
 
-Let's add some color. To do that we can use the `highlights` component of slimline:
 
+If you want to use internal render functionality of a component you can do it like that:
 ```lua
 function ()
-    local sh = require("slimline.highlights")
-    local content = "Hello World"
-    return sh.hl_content(content, sh.hls.primary.text)
+    local h = require("slimline.highlights")
+    local c = require("slimline").config
+    return h.hl_component({primary = "Hello", secondary = "World"}, h.hls, config.sep)
 end
 ```
-It will now look like that:
 
-![c2](./doc/custom_components/2.png)
-
-To add configured separators we can add them to `hl_content`:
-
-```lua
-function ()
-    local sh = require("slimline.highlights")
-    local cfg = require("slimline").config
-    local content = " Hello World "
-    return sh.hl_content(content, sh.hls.primary.text, cfg.sep.left, cfg.sep.right)
-end
-```
-
-Now we have a primary part of a new component:
-
-![c3](./doc/custom_components/3.png)
-
-To add a secondary part we need to change it like that:
-
-```lua
-function ()
-    local sh = require("slimline.highlights")
-    local cfg = require("slimline").config
-    local content = sh.hl_content(" Hello ", sh.hls.primary.text, cfg.sep.left)
-    content = content .. sh.hl_content(cfg.sep.right, sh.hls.primary.sep_transition)
-    content = content .. sh.hl_content(" World ", sh.hls.secondary.text, nil, cfg.sep.right)
-    return content
-end
-```
-
-And we have our final result of a custom component which respects separators and colors from the config:
+It will now render to that (depending on the config)
 
 ![c4](./doc/custom_components/4.png)
+
+Of course you can use `Slimline*` highlight groups on your own to create your own styled component
diff --git a/doc/custom_components/2.png b/doc/custom_components/2.png
deleted file mode 100644
index cfbc1d6..0000000
Binary files a/doc/custom_components/2.png and /dev/null differ
diff --git a/doc/custom_components/3.png b/doc/custom_components/3.png
deleted file mode 100644
index 211a5c7..0000000
Binary files a/doc/custom_components/3.png and /dev/null differ
diff --git a/lua/slimline/components/diagnostics.lua b/lua/slimline/components/diagnostics.lua
index a85f378..911aa4a 100644
--- a/lua/slimline/components/diagnostics.lua
+++ b/lua/slimline/components/diagnostics.lua
@@ -44,7 +44,7 @@ function M.render(config, sep)
     return ''
   end
   last_diagnostic_component =
-    highlights.hl_content(' ' .. last_diagnostic_component .. ' ', highlights.hls.primary.text, sep.left, sep.right)
+    highlights.hl_component({primary=last_diagnostic_component}, highlights.hls, sep, 'left')
   return last_diagnostic_component
 end
 
diff --git a/lua/slimline/components/filetype_lsp.lua b/lua/slimline/components/filetype_lsp.lua
index 72b756b..d704aa2 100644
--- a/lua/slimline/components/filetype_lsp.lua
+++ b/lua/slimline/components/filetype_lsp.lua
@@ -11,9 +11,9 @@ function M.render(config, sep)
   local icon = ''
   local ok, MiniIcons = pcall(require, 'mini.icons')
   if ok then
-    icon = ' ' .. MiniIcons.get('filetype', filetype)
+    icon = MiniIcons.get('filetype', filetype)
   end
-  filetype = highlights.hl_content(icon .. ' ' .. filetype .. ' ', highlights.hls.primary.text, nil, sep.right)
+  filetype = icon .. ' ' .. filetype
 
   local attached_clients = vim.lsp.get_clients { bufnr = 0 }
   local it = vim.iter(attached_clients)
@@ -24,18 +24,7 @@ function M.render(config, sep)
   local names = it:totable()
   local lsp_clients = string.format('%s', table.concat(names, ','))
 
-  local filetype_hl_sep_left = highlights.hls.primary.sep
-  if #attached_clients > 0 then
-    filetype_hl_sep_left = highlights.hls.primary.sep_transition
-  end
-  filetype = highlights.hl_content(config.sep.left, filetype_hl_sep_left) .. filetype
-  lsp_clients = highlights.hl_content(' ' .. lsp_clients .. ' ', highlights.hls.secondary.text, sep.left)
-
-  local result = filetype
-  if #attached_clients > 0 then
-    result = lsp_clients .. result
-  end
-  return result
+  return highlights.hl_component({ primary = filetype, secondary = lsp_clients }, highlights.hls, sep, 'left')
 end
 
 return M
diff --git a/lua/slimline/components/git.lua b/lua/slimline/components/git.lua
index 496b5c4..7cbb7e8 100644
--- a/lua/slimline/components/git.lua
+++ b/lua/slimline/components/git.lua
@@ -13,38 +13,26 @@ function M.render(config, sep)
     return ''
   end
 
+  local branch = string.format('%s %s', config.icons.git.branch, status.head)
+
   local added = status.added and status.added > 0
   local removed = status.removed and status.removed > 0
   local changed = status.changed and status.changed > 0
   local modifications = added or removed or changed
 
-  local branch = string.format(' %s %s ', config.icons.git.branch, status.head)
-  branch = highlights.hl_content(branch, highlights.hls.primary.text, sep.left)
-  local branch_hl_right_sep = highlights.hls.primary.sep
-  if modifications then
-    branch_hl_right_sep = highlights.hls.primary.sep_transition
-  end
-  -- if there are modifications the main part of the git components should have a right side
-  -- seperator
-  if modifications then
-    sep.right = config.sep.right
-  end
-  branch = branch .. highlights.hl_content(sep.right, branch_hl_right_sep)
-
-  local mods = ''
+  local mods = {}
   if modifications then
     if added then
-      mods = mods .. string.format(' +%s', status.added)
+      table.insert(mods, string.format('+%s', status.added))
     end
     if changed then
-      mods = mods .. string.format(' ~%s', status.changed)
+      table.insert(mods, string.format('~%s', status.changed))
     end
     if removed then
-      mods = mods .. string.format(' -%s', status.removed)
+      table.insert(mods, string.format('-%s', status.removed))
     end
-    mods = highlights.hl_content(mods .. ' ', highlights.hls.secondary.text, nil, sep.right)
   end
-  return branch .. mods
+  return highlights.hl_component({primary = branch, secondary = table.concat(mods, ' ')}, highlights.hls, sep, 'right')
 end
 
 return M
diff --git a/lua/slimline/components/mode.lua b/lua/slimline/components/mode.lua
index 7cc9113..55d37ac 100644
--- a/lua/slimline/components/mode.lua
+++ b/lua/slimline/components/mode.lua
@@ -11,8 +11,8 @@ function M.render(config, sep)
   if config.verbose_mode == false then
     render = string.sub(mode, 1, 1)
   end
-  local content = ' ' .. render .. ' '
-  return highlights.hl_content(content, highlights.get_mode_hl(mode), sep.left, sep.right)
+  local hl = highlights.get_mode_hl(mode)
+  return highlights.hl_component({ primary = render }, hl, sep, 'right')
 end
 
 return M
diff --git a/lua/slimline/components/path.lua b/lua/slimline/components/path.lua
index 67de275..7464a9c 100644
--- a/lua/slimline/components/path.lua
+++ b/lua/slimline/components/path.lua
@@ -5,16 +5,15 @@ local highlights = require('slimline.highlights')
 --- @param sep {left: string, right: string}
 --- @return string
 function M.render(config, sep)
-  local file = highlights.hl_content(' ' .. vim.fn.expand('%:t') .. ' %m%r', highlights.hls.primary.text, sep.left)
-  file = file .. highlights.hl_content(config.sep.right, highlights.hls.primary.sep_transition)
+  local file = vim.fn.expand('%:t') .. '%m%r'
 
   local path = vim.fs.normalize(vim.fn.expand('%:.:h'))
   if #path == 0 then
     return ''
   end
-  path = highlights.hl_content(' ' .. config.icons.folder .. path .. ' ', highlights.hls.secondary.text, nil, sep.right)
+  path = config.icons.folder .. path
 
-  return file .. path
+  return highlights.hl_component({primary = file, secondary = path}, highlights.hls, sep, 'right')
 end
 
 return M
diff --git a/lua/slimline/components/progress.lua b/lua/slimline/components/progress.lua
index d6a7259..ffbd398 100644
--- a/lua/slimline/components/progress.lua
+++ b/lua/slimline/components/progress.lua
@@ -16,8 +16,8 @@ function M.render(config, sep)
   else
     content = string.format('%2d%%%%', math.floor(cur / total * 100))
   end
-  content = string.format(' %s %s / %s ', config.icons.lines, content, total)
-  return highlights.hl_content(content, highlights.get_mode_hl(utils.get_mode()), sep.left, sep.right)
+  content = string.format('%s %s / %s', config.icons.lines, content, total)
+  return highlights.hl_component({primary = content}, highlights.get_mode_hl(utils.get_mode()), sep, 'left')
 end
 
 return M
diff --git a/lua/slimline/highlights.lua b/lua/slimline/highlights.lua
index 3308fc0..33f3830 100644
--- a/lua/slimline/highlights.lua
+++ b/lua/slimline/highlights.lua
@@ -5,7 +5,7 @@ M.hls = {
   primary = {
     text = nil,
     sep = nil,
-    sep_transition = nil,
+    sep2sec = nil,
   },
   secondary = {
     text = nil,
@@ -13,27 +13,38 @@ M.hls = {
   },
   mode = {
     normal = {
-      text = nil,
-      sep = nil,
+      primary = {
+        text = nil,
+        sep = nil,
+      },
     },
     pending = {
-      text = nil,
-      sep = nil,
+      primary = {
+        text = nil,
+        sep = nil,
+      },
     },
     visual = {
-      text = nil,
-      sep = nil,
+      primary = {
+        text = nil,
+        sep = nil,
+      },
     },
     insert = {
-      text = nil,
-      sep = nil,
+      primary = {
+        text = nil,
+        sep = nil,
+      },
     },
     command = {
-      text = nil,
-      sep = nil,
+      primary = {
+        text = nil,
+        sep = nil,
+      },
     },
   },
 }
+
 function M.create_hls()
   local config = require('slimline').config
   M.hls.base = M.create_hl('', config.hl.base)
@@ -45,22 +56,21 @@ function M.create_hls()
 
   M.hls.primary.text = M.create_hl('Primary', config.hl.primary, as_background, config.bold)
   M.hls.primary.sep = M.create_hl('PrimarySep', config.hl.primary)
-  M.hls.primary.sep_transition =
-    M.create_hl('PrimarySepTransition', config.hl.primary, false, false, config.hl.secondary)
+  M.hls.primary.sep2sec = M.create_hl('PrimarySep2Sec', config.hl.primary, false, false, config.hl.secondary)
 
   M.hls.secondary.text = M.create_hl('Secondary', config.hl.secondary, as_background, false)
   M.hls.secondary.sep = M.create_hl('SecondarySep', config.hl.secondary)
 
-  M.hls.mode.normal.text = M.create_hl('NormalMode', config.hl.modes.normal, as_background, config.bold)
-  M.hls.mode.normal.sep = M.create_hl('NormalModeSep', config.hl.modes.normal)
-  M.hls.mode.pending.text = M.create_hl('PendingMode', config.hl.modes.pending, as_background, config.bold)
-  M.hls.mode.pending.sep = M.create_hl('PendingModeSep', config.hl.modes.pending)
-  M.hls.mode.visual.text = M.create_hl('VisualMode', config.hl.modes.visual, as_background, config.bold)
-  M.hls.mode.visual.sep = M.create_hl('VisualModeSep', config.hl.modes.visual)
-  M.hls.mode.insert.text = M.create_hl('InsertMode', config.hl.modes.insert, as_background, config.bold)
-  M.hls.mode.insert.sep = M.create_hl('InsertModeSep', config.hl.modes.insert)
-  M.hls.mode.command.text = M.create_hl('CommandMode', config.hl.modes.command, as_background, config.bold)
-  M.hls.mode.command.sep = M.create_hl('CommandModeSep', config.hl.modes.command)
+  M.hls.mode.normal.primary.text = M.create_hl('NormalMode', config.hl.modes.normal, as_background, config.bold)
+  M.hls.mode.normal.primary.sep = M.create_hl('NormalModeSep', config.hl.modes.normal)
+  M.hls.mode.pending.primary.text = M.create_hl('PendingMode', config.hl.modes.pending, as_background, config.bold)
+  M.hls.mode.pending.primary.sep = M.create_hl('PendingModeSep', config.hl.modes.pending)
+  M.hls.mode.visual.primary.text = M.create_hl('VisualMode', config.hl.modes.visual, as_background, config.bold)
+  M.hls.mode.visual.primary.sep = M.create_hl('VisualModeSep', config.hl.modes.visual)
+  M.hls.mode.insert.primary.text = M.create_hl('InsertMode', config.hl.modes.insert, as_background, config.bold)
+  M.hls.mode.insert.primary.sep = M.create_hl('InsertModeSep', config.hl.modes.insert)
+  M.hls.mode.command.primary.text = M.create_hl('CommandMode', config.hl.modes.command, as_background, config.bold)
+  M.hls.mode.command.primary.sep = M.create_hl('CommandModeSep', config.hl.modes.command)
 end
 
 ---@param hl string
@@ -101,7 +111,7 @@ end
 
 --- Helper function to highlight a given content
 --- Resets the highlight afterwards
---- @param content string
+--- @param content string?
 --- @param hl string?
 --- @param sep_left string?
 --- @param sep_right string?
@@ -118,26 +128,67 @@ function M.hl_content(content, hl, sep_left, sep_right)
   if sep_right ~= nil then
     rendered = rendered .. string.format('%%#%s#%s', hl .. 'Sep', sep_right)
   end
-  rendered = rendered .. '%#' .. M.hls.base .. '#'
   return rendered
 end
 
---- Function to get the highlight of a given mode
+---@param content string?
+---@return string?
+function M.pad(content)
+  if content == nil then
+    return nil
+  end
+  return ' ' .. content .. ' '
+end
+
+---@param content {primary: string, secondary: string?}
+---@param hl {primary: {text: string, sep: string, sep2sec?: string}, secondary?: {text: string, sep: string} }
+---@param sep {left: string, right: string}
+---@param direction string?
+---|"'left'"
+---|"'right'"
+---@return string
+function M.hl_component(content, hl, sep, direction)
+  local result = ''
+  if content.primary == nil then
+    return ''
+  end
+  if content.secondary == '' then
+    content.secondary = nil
+  end
+
+  if content.secondary == nil then
+    result = M.hl_content(M.pad(content.primary), hl.primary.text, sep.left, sep.right)
+  else
+    if direction == 'left' then
+      result = M.hl_content(M.pad(content.secondary), hl.secondary.text, sep.left)
+      result = result .. M.hl_content(sep.left, hl.primary.sep2sec)
+      result = result .. M.hl_content(M.pad(content.primary), hl.primary.text, nil, sep.right)
+    else
+      result = M.hl_content(M.pad(content.primary), hl.primary.text, sep.left)
+      result = result .. M.hl_content(sep.right, hl.primary.sep2sec)
+      result = result .. M.hl_content(M.pad(content.secondary), hl.secondary.text, nil, sep.right)
+    end
+  end
+  result = result .. '%#' .. M.hls.base .. '#'
+  return result
+end
+
+--- Function to get the highlight config
 --- @param mode string
---- @return string
+--- @return table
 function M.get_mode_hl(mode)
   if mode == 'NORMAL' then
-    return M.hls.mode.normal.text
+    return M.hls.mode.normal
   elseif mode:find('PENDING') then
-    return M.hls.mode.pending.text
+    return M.hls.mode.pending
   elseif mode:find('VISUAL') then
-    return M.hls.mode.visual.text
+    return M.hls.mode.visual
   elseif mode:find('INSERT') or mode:find('SELECT') then
-    return M.hls.mode.insert.text
+    return M.hls.mode.insert
   elseif mode:find('COMMAND') or mode:find('TERMINAL') or mode:find('EX') then
-    return M.hls.mode.command.text
+    return M.hls.mode.command
   end
-  return M.hls.secondary.text
+  return M.hls
 end
 
 return M