diff --git a/Canopy/Canopy/Assets.xcassets/SecondaryAccent.colorset/Contents.json b/Canopy/Canopy/Assets.xcassets/SecondaryAccent.colorset/Contents.json
index 1bf444a..72ac497 100644
--- a/Canopy/Canopy/Assets.xcassets/SecondaryAccent.colorset/Contents.json
+++ b/Canopy/Canopy/Assets.xcassets/SecondaryAccent.colorset/Contents.json
@@ -12,6 +12,9 @@
       },
       "idiom" : "universal"
     },
+    {
+      "idiom" : "universal"
+    },
     {
       "appearances" : [
         {
diff --git a/Canopy/Canopy/ContradictionDiary.swift b/Canopy/Canopy/ContradictionDiary.swift
index 9b4d1e7..1d51395 100644
--- a/Canopy/Canopy/ContradictionDiary.swift
+++ b/Canopy/Canopy/ContradictionDiary.swift
@@ -34,7 +34,7 @@ struct ContradictionDiary: View {
         ScrollView {
             VStack(alignment: .leading) {
                 VStack {
-                    headerAndInputCard
+                    header
                 }
                 .background(
                     Image("SunMoonBackground")
@@ -42,7 +42,7 @@ struct ContradictionDiary: View {
                         .opacity(0.4)
                         .ignoresSafeArea()
                 )
-                
+
                 suggestionsSection
             }
             .padding(.horizontal)
@@ -51,12 +51,7 @@ struct ContradictionDiary: View {
         .background(Theme.BackgroundColor.ignoresSafeArea())
     }
 
-    private var headerAndInputCard: some View {
-        VStack(alignment: .leading) {
-            header
-            inputCard
-        }
-    }
+    @State private var userPrompt: String = ""
 
     private var header: some View {
         ZStack {
@@ -77,25 +72,21 @@ struct ContradictionDiary: View {
                 .font(TextStyle.body)
                 .foregroundColor(Theme.SecondaryAccentColor)
                 .padding(.horizontal, 24)
+                VStack {
+                    TextEditorWithPlaceholder(
+                        text: $userPrompt,
+                        placeholder: "What's on your mind today?",
+                        textColor: .black
+                    )
+                    .cornerRadius(16)
+                    .opacity(0.4)
+                }
+                .padding(.horizontal, 24)
             }
             .padding(.vertical, 32)
         }
     }
 
-    private var inputCard: some View {
-        RoundedRectangle(cornerRadius: 16)
-            .fill(Theme.TertiaryAccentColor)
-            .frame(height: 140)
-            .overlay(
-                Text("What's on your mind today?")
-                    .font(TextStyle.body)
-                    .foregroundColor(Theme.SecondaryAccentColor)
-                    .padding()
-                    .multilineTextAlignment(.center)
-                    .frame(maxWidth: .infinity, alignment: .center)
-            )
-    }
-
     private var suggestionsSection: some View {
         VStack(alignment: .leading, spacing: 12) {
             Text("Suggestions")
@@ -104,6 +95,7 @@ struct ContradictionDiary: View {
 
             ForEach(displayItems) { item in
                 SuggestionCardView(item: item)
+                
             }
         }
     }
@@ -125,17 +117,19 @@ private struct SuggestionCardView: View {
                 .fill(Theme.TertiaryAccentColor)
                 .frame(height: 50)
                 .redacted(reason: .placeholder)
+                .padding(.horizontal, 16)
         } else {
             ZStack(alignment: .leading) {
                 RoundedRectangle(cornerRadius: 20)
                     .fill(Theme.PrimaryAccentColor)
-                    .frame(height: 60)
+                    .frame(height: 80)
 
                 Text(item.text)
                     .font(TextStyle.body)
                     .foregroundColor(.white)
-                    .padding(.horizontal, 16)
+                    .padding(.horizontal, 20)
             }
+            .padding(.horizontal, 16)
         }
     }
 }
diff --git a/Canopy/Canopy/StyleGuide/Theme.swift b/Canopy/Canopy/StyleGuide/Theme.swift
index f13fe47..dc931a6 100644
--- a/Canopy/Canopy/StyleGuide/Theme.swift
+++ b/Canopy/Canopy/StyleGuide/Theme.swift
@@ -9,9 +9,9 @@ import Foundation
 import SwiftUI
 
 struct Theme {
-    static let PrimaryColor: Color = Color("Primary")
-    static let BackgroundColor: Color = Color("Background")
-    static let PrimaryAccentColor: Color = Color("PrimaryAccent")
-    static let SecondaryAccentColor: Color = Color("SecondaryAccent")
-    static let TertiaryAccentColor: Color = Color("TertiaryAccent")
+    static let PrimaryColor: Color = Color(.primary)
+    static let BackgroundColor: Color = Color(.background)
+    static let PrimaryAccentColor: Color = Color(.primaryAccent)
+    static let SecondaryAccentColor: Color = Color(.secondaryAccent)
+    static let TertiaryAccentColor: Color = Color(.teriaryAccent)
 }
diff --git a/Canopy/Canopy/TextEditorWithPlaceHolder.swift b/Canopy/Canopy/TextEditorWithPlaceHolder.swift
new file mode 100644
index 0000000..9269b9c
--- /dev/null
+++ b/Canopy/Canopy/TextEditorWithPlaceHolder.swift
@@ -0,0 +1,53 @@
+//
+//  TextEditorWithPlaceHolder.swift
+//  Canopy
+//
+//  Created by Danny Kwong on 4/29/25.
+//
+import SwiftUI
+
+struct TextEditorWithPlaceholder: View {
+    @Binding var text: String
+    var placeholder: String
+    var textColor: Color = .primary
+    var placeholderColor: Color = .gray
+    var backgroundColor: Color = Color(UIColor.secondarySystemBackground)
+
+    var body: some View {
+        ZStack(alignment: .topLeading) {
+            if text.isEmpty {
+                Text(placeholder)
+                    .foregroundColor(placeholderColor)
+                    .padding(.top, 10)
+                    .padding(.leading, 6)
+                    .opacity(0.8)
+            }
+
+            TextEditor(text: $text)
+                .foregroundColor(textColor)
+                .scrollContentBackground(.hidden)
+                .background(backgroundColor)
+                .frame(minHeight: 150, maxHeight: 300)
+                .opacity(text.isEmpty ? 0.7 : 1.0)
+        }
+        .padding()
+        .background(
+            RoundedRectangle(cornerRadius: 12, style: .continuous)
+                .fill(backgroundColor)
+        )
+        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
+    }
+}
+
+#Preview("Light Mode") {
+    TextEditorWithPlaceholder(text: .constant(""), placeholder: "What's on your mind today?")
+        .preferredColorScheme(.dark)
+        .padding()
+}
+
+#Preview("Dark Mode") {
+    TextEditorWithPlaceholder(text: .constant(""), placeholder: "What's on your mind today?")
+        .padding()
+        .preferredColorScheme(.light)
+        .padding()
+}