diff --git a/layouts/partials/misc/skills-breakdown.html b/layouts/partials/misc/skills-breakdown.html
new file mode 100644
index 0000000..800bf86
--- /dev/null
+++ b/layouts/partials/misc/skills-breakdown.html
@@ -0,0 +1,96 @@
+{{ if .breakdown }}
+    {{ $parentId := .parentId }}
+    {{ $level := .level }}
+    <div class="container p-0 skill-list">
+        <div id="skill-list-accordion-{{ $parentId }}">
+            {{ range $index, $section := .breakdown }}
+                {{ $entryId := (printf "%s-%d" $parentId $index) }}
+                {{ $hasChildrenSections := (isset . "breakdown") }}
+                {{/* a suitable auto-open policy might be something like: $isOpened := or (eq $index 0) (and (gt $level 0) (lt $level 2)) */}}
+                {{ $isOpened := (.expandBreakdown | default false) }}
+                <div class="skill-row {{ if $hasChildrenSections }}skill-row-with-children{{end}}">
+                    <div class="skill-row-header" id="heading-{{ $entryId }}" data-toggle="collapse" data-target="#collapse-{{ $entryId }}" 
+                        {{ if $isOpened }} aria-expanded="true" {{ end }}
+                        aria-controls="collapse-{{ $entryId }}"
+                    >
+                        <div class="row">
+                            <div class="col-12 col-md-2 col-lg-1 pb-2">
+                                {{ if isset . "percentage" }}
+                                    {{ partial "partials/misc/circular-progress.html" (dict "ctx" . "size" "xs") }}
+                                {{ end }}
+            
+                                {{ if .logo }}
+                                    {{ $logoImage := "" }}
+                                    {{ $logoImage = resources.Get .logo }}
+                                    {{ if ne $logoImage.MediaType.SubType "svg" }}
+                                        {{ $logoImage = $logoImage.Fit "32x32" }}
+                                    {{ end }}
+                                    <img class="card-img-sm mr-2" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+                                {{ end }}
+                            </div>
+                            <div class="col-12 col-md-9 col-lg-10 pb-2">
+                                {{ with .name }}
+                                    {{ . }}
+                                {{ end }}
+            
+                                {{ if isset . "progress" }}
+                                    {{ $progressClass := "" }}
+                                    {{ if isset . "progressClass" }}
+                                        {{ $progressClass = .progressClass }}
+                                    {{ else }}
+                                        {{ if le .progress 30 }}
+                                            {{ $progressClass = "bg-danger" }}
+                                        {{ else if le .progress 75 }}
+                                            {{ $progressClass = "bg-warning" }}
+                                        {{ else }}
+                                            {{ $progressClass = "bg-success" }}
+                                        {{ end }}
+                                    {{ end }}
+                                    <div class="progress skill-progress">
+                                        <div 
+                                            class="progress-bar {{ $progressClass }}" 
+                                            role="progressbar" 
+                                            aria-valuemin="0" 
+                                            aria-valuemax="100"
+                                            style="width: {{ .progress }}%"
+                                            aria-valuenow="{{ .progress }}" 
+                                        ></div>
+                                    </div>
+                                {{ end }}
+            
+                                {{ with .summary }}
+                                    <p class="text-muted">
+                                        {{ . | markdownify }}
+                                    </p>
+                                {{ end }}
+                            </div>
+                            <div class="col-12 col-md-1 text-right skill-panel-indicator-cell">
+                                {{ if $hasChildrenSections }}
+                                <a class="skill-panel-indicator">
+                                    <span class="is-opened fas fa-caret-up"></span>
+                                    <span class="is-closed fas fa-caret-down"></span>
+                                </a>
+                                {{ end }}
+                            </div>
+                        </div>
+                    </div>
+                
+                    {{ if $hasChildrenSections }}
+                        <div id="collapse-{{ $entryId }}" class="collapse {{ if $isOpened }}show{{ end }}" aria-labelledby="heading-{{ $entryId }}" data-parent="#skill-list-accordion-{{ $parentId }}">
+                            <div class="skill-row-body">
+                                <div class="row">
+                                    <div class="col-12 col-sm-1">
+                                        <!-- EMPTY -->
+                                    </div>
+                                    <div class="col-12 col-sm-11">
+                                        {{ partial "partials/misc/skills-breakdown.html" (dict "breakdown" .breakdown "parentId" $entryId "level" (add $level 1)) }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {{ end }}
+                </div>
+            {{ end }}
+        </div>
+    </div>
+{{ end }}
\ No newline at end of file
diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css
index 3fdc05f..942c040 100644
--- a/static/css/sections/skills.css
+++ b/static/css/sections/skills.css
@@ -18,6 +18,10 @@
   text-decoration: none;
 }
 
+.skills-section .skill-card-link-with-popup {
+  cursor: pointer;
+}
+
 .skills-section .card .card-img-xs {
   margin-right: 0.5rem;
 }
@@ -33,6 +37,77 @@
   padding-left: 0.7rem;
 }
 
+.skills-section .skill-card-bottom-row {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-bottom: 0.25em;
+}
+
+.skills-section .skill-card-icons {
+  text-align: left;
+  padding-top: 0.25em;
+}
+
+.skills-section .skill-card-icons img {
+  width: 24px;
+  height: 24px;
+  margin-right: 0.50em;
+}
+
+.skills-section .card .skill-card-buttons {
+  text-align: right;
+  padding-top: 0;
+  padding-right: 0.20em;
+}
+
+/* ============= Skills drill-down popup ======= */
+
+.skill-modal .skill-popup-summary {
+  margin-bottom: 2.50em;
+}
+
+.skill-list .skill-progress {
+  height: 0.25rem;
+}
+
+.skill-list .skill-row p {
+  margin-bottom: 0.50rem;
+}
+
+.skill-list .skill-row:last-child {
+  margin-bottom: 1.25rem;
+}
+
+.skill-list .skill-row.skill-row-with-children {
+  cursor: pointer;
+}
+
+.skill-list .skill-row.skill-row-with-children .skill-panel-indicator-cell {
+  padding-top: 0.50em;
+}
+
+.skill-list .skill-row.skill-row-with-children .skill-panel-indicator {
+  cursor: pointer;
+  color: #6c757d!important;
+}
+
+.skill-list .skill-row .skill-row-header[aria-expanded="true"] .is-opened {
+  display: inline;
+}
+.skill-list .skill-row .skill-row-header[aria-expanded="true"] .is-closed {
+  display: none;
+}
+.skill-list .skill-row .skill-row-header:not([aria-expanded="true"]) .is-opened {
+  display: none;
+}
+.skill-list .skill-row .skill-row-header:not([aria-expanded="true"]) .is-closed {
+  display: inline;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */