diff --git a/secant/UI Components/DesignGuide.swift b/secant/UI Components/DesignGuide.swift
index 1808d50..59bd021 100644
--- a/secant/UI Components/DesignGuide.swift	
+++ b/secant/UI Components/DesignGuide.swift	
@@ -3,54 +3,152 @@
 //  secant-testnet
 //
 //  Created by Francisco Gindre on 10/18/21.
-//
+// swiftlint:disable line_length
 
 import SwiftUI
 
 struct DesignGuide: View {
+    var body: some View {
+        HStack {
+            TextAndPlaceholdersGuide()
+            SmallVisualElements()
+            ButtonGuide()
+        }
+    }
+}
+
+struct TextAndPlaceholdersGuide: View {
     var body: some View {
         VStack(spacing: 30) {
             Text("H1 Onboarding Rubik Light")
                 .font(FontFamily.Rubik.light.textStyle(.title))
                 .foregroundColor(Asset.Colors.Text.titleText.color)
-            Text("H1 Onboarding Rubik medium")
-                .font(FontFamily.Rubik.medium.textStyle(.title))
+            Text(
+                """
+                Rubik 16 regular #93A4BE Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                """
+            )
+                .font(FontFamily.Rubik.light.textStyle(.footnote))
+                .fontWeight(.thin)
                 .foregroundColor(Asset.Colors.Text.titleText.color)
+
+            Text("Placeholder for circular view")
+                .frame(width: 370, height: 370, alignment: .center)
+
+            Text("Placeholder for rectangular view")
+                .frame(width: 386, height: 125, alignment: .center)
+            OnboardingProgressViewPreviewHelper()
+        }
+    }
+}
+
+struct SmallVisualElements: View {
+    let gridItems = [GridItem(.flexible(minimum: 40, maximum: 100)), GridItem(.flexible(minimum: 40, maximum: 100))]
+    var body: some View {
+        VStack {
+            LazyVGrid(columns: gridItems) {
+                // TODO: Change state to selected
+                Button("Back") { dump("Example button") }
+                    .buttonStyle(NavigationButtonStyle())
+                    .frame(width: 80, height: 40)
+                Button("Skip") { dump("Example button") }
+                .buttonStyle(NavigationButtonStyle())
+                    .frame(width: 80, height: 40)
+
+                // Active Navigation Buttons
+                Button("Back") { dump("Example button") }
+                    .buttonStyle(NavigationButtonStyle())
+                    .frame(width: 80, height: 40)
+                Button("Skip") { dump("Example button") }
+                .buttonStyle(NavigationButtonStyle())
+                    .frame(width: 80, height: 40)
+            }
+            Text("shield icon")
+                .frame(width: 76, height: 76)
+            Text("profile icon")
+                .frame(width: 76, height: 76)
+            Text("listing icon")
+                .frame(width: 76, height: 76)
+        }
+    }
+}
+
+struct ButtonGuide: View {
+    let buttonHeight: CGFloat = 60
+    var body: some View {
+        VStack(spacing: 30) {
+            // Idle Primary Button
             Button(action: {}) {
                 Text("Primary Button")
             }
             .primaryButtonStyle
-            .frame(height: 50)
+            .frame(height: buttonHeight)
 
+            // TODO: Pressed Primary Button
+            Button(action: {}) {
+                Text("Primary Button")
+            }
+            .primaryButtonStyle
+            .frame(height: buttonHeight)
+
+            // Disabled Primary Button
+            Button(action: {}) {
+                Text("Primary Button")
+            }
+            .primaryButtonStyle
+            .frame(height: buttonHeight)
+            .disabled(true)
+
+            // Idle Primary Action Button
             Button(action: {}) {
                 Text("Primary Active Button")
             }
             .createButtonStyle
-            .frame(height: 50)
+            .frame(height: buttonHeight)
 
+            // TODO: Pressed Primary Action Button
+            Button(action: {}) {
+                Text("Primary Active Button")
+            }
+            .createButtonStyle
+            .frame(height: buttonHeight)
+
+            // TODO: Pressed Primary Action Button
+            Button(action: {}) {
+                Text("Primary Active Button")
+            }
+            .createButtonStyle
+            .frame(height: buttonHeight)
+
+            // Idle Secondary Button
             Button(action: {}) {
                 Text("Secondary Button")
             }
             .secondaryButtonStyle
-            .frame(height: 50)
+            .frame(height: buttonHeight)
 
+            // Action Button
             Button(action: {}) {
                 Text("Action Button")
             }
             .activeButtonStyle
-            .frame(height: 50)
+            .frame(height: buttonHeight)
+            Spacer()
         }
-        .padding(.horizontal, 30)
-        .applyScreenBackground()
     }
 }
-
 struct DesignGuide_Previews: PreviewProvider {
     static var previews: some View {
         DesignGuide()
+            .padding(30)
+            .applyScreenBackground()
             .preferredColorScheme(.dark)
+            .previewLayout(.fixed(width: 1086, height: 1080))
 
         DesignGuide()
+            .padding(30)
+            .applyScreenBackground()
             .preferredColorScheme(.light)
+            .previewLayout(.fixed(width: 1086, height: 1080))
     }
 }