diff --git a/Shared/views/HeaderPercView.swift b/Shared/views/HeaderPercView.swift
index 297db43..c77b195 100644
--- a/Shared/views/HeaderPercView.swift
+++ b/Shared/views/HeaderPercView.swift
@@ -7,12 +7,19 @@
 
 import SwiftUI
 
+enum PercViewType {
+    case text
+    case circular
+}
+
 struct HeaderPercView: View {
     typealias model = (mood: Mood, total: Int, percent: Float)
     var entries = [model]()
     let backDays: Int
+    let type: PercViewType
     
-    init(fakeData: Bool, backDays: Int) {
+    init(fakeData: Bool, backDays: Int, type: PercViewType) {
+        self.type = type
         self.backDays = backDays
         var moodEntries: [MoodEntry]?
 
@@ -48,7 +55,7 @@ struct HeaderPercView: View {
         })
     }
     
-    var body: some View {
+    private var textViews: some View {
         VStack {
             Spacer()
             HStack {
@@ -73,10 +80,55 @@ struct HeaderPercView: View {
             Spacer()
         }
     }
+    
+    private var circularViews: some View {
+        VStack {
+            Spacer()
+            HStack {
+                ForEach(entries.prefix(3), id: \.0) { model in
+                    Text("\(model.percent, specifier: "%.0f")%")
+                        .font(.title2)
+                        .fontWeight(.bold)
+                        .multilineTextAlignment(.center)
+                        .padding()
+                        .frame(maxWidth: .infinity)
+                        .background(Circle().fill(model.mood.color))
+                        .foregroundColor(Color(UIColor.white))
+                }
+            }
+            Spacer()
+            HStack {
+                ForEach(entries.suffix(2), id: \.0) { model in
+                    Text("\(model.percent, specifier: "%.0f")%")
+                        .font(.title2)
+                        .fontWeight(.bold)
+                        .multilineTextAlignment(.center)
+                        .padding()
+                        .frame(maxWidth: .infinity)
+                        .background(Circle().fill(model.mood.color))
+                        .foregroundColor(Color(UIColor.white))
+                }
+            }
+            Spacer()
+        }
+    }
+    
+    var body: some View {
+        ZStack {
+            switch self.type {
+            case .text:
+                textViews
+            case .circular:
+                circularViews
+            }
+        }
+    }
 }
 
 struct HeaderPercView_Previews: PreviewProvider {
     static var previews: some View {
-        SmallRollUpHeaderView(fakeData: true, backDays: 30)
+        HeaderPercView(fakeData: true, backDays: 30, type: .text)
+        
+        HeaderPercView(fakeData: true, backDays: 30, type: .circular)
     }
 }
diff --git a/Shared/views/SwitchableView.swift b/Shared/views/SwitchableView.swift
index 5b71b1b..288239b 100644
--- a/Shared/views/SwitchableView.swift
+++ b/Shared/views/SwitchableView.swift
@@ -21,10 +21,14 @@ struct SwitchableView: View {
                     .opacity(currentViewIdx == 0 ? 1 : 0)
                     .allowsHitTesting(false)
                 
-                HeaderPercView(fakeData: false, backDays: daysBack)
+                HeaderPercView(fakeData: false, backDays: daysBack, type: .circular)
                     .opacity(currentViewIdx == 1 ? 1 : 0)
                     .allowsHitTesting(false)
                 
+                HeaderPercView(fakeData: false, backDays: daysBack, type: .text)
+                    .opacity(currentViewIdx == 2 ? 1 : 0)
+                    .allowsHitTesting(false)
+                
                 VStack {
                     HStack {
                         Spacer()
@@ -55,7 +59,7 @@ struct SwitchableView: View {
         .padding(.bottom, 30)
         .onTapGesture {
             currentViewIdx += 1
-            if currentViewIdx == 2 {
+            if currentViewIdx == 3 {
                 currentViewIdx = 0
             }
         }