diff --git a/src/js/components/Header.tsx b/src/js/components/Header.tsx
index 883ae86e..f7a69c0f 100644
--- a/src/js/components/Header.tsx
+++ b/src/js/components/Header.tsx
@@ -187,7 +187,7 @@ export default class Header extends Component {
         </Show>
         <a
           href="/notifications"
-          className={`relative inline-block ${this.state.isMyProfile ? 'hidden md:flex' : ''}`}
+          className={`relative inline-block rounded-full ${this.state.isMyProfile ? 'hidden md:flex' : ''}`}
         >
           {this.state.activeRoute === '/notifications' ? (
             <HeartIconFull width={28} />
diff --git a/src/js/components/create/CreateNoteForm.tsx b/src/js/components/create/CreateNoteForm.tsx
index 41850612..6f65be88 100644
--- a/src/js/components/create/CreateNoteForm.tsx
+++ b/src/js/components/create/CreateNoteForm.tsx
@@ -135,7 +135,7 @@ function CreateNoteForm({
       />
       <Show when={focused}>
         <div className="flex items-center justify-between mt-4">
-          <button type="button" className="btn" onClick={attachFileClicked}>
+          <button type="button" className="btn btn-sm" onClick={attachFileClicked}>
             {Icons.attach}
           </button>
           <div className="flex flex-row gap-2">
@@ -147,7 +147,7 @@ function CreateNoteForm({
             </button>
           </div>
         </div>
-        <div className="p-2 bg-neutral-900 rounded-sm my-4">
+        <div className="p-2 md:p-4 bg-neutral-900 rounded-sm my-4">
           <div className="text-xs text-neutral-500 mb-2">{t('preview')}</div>
           <EventContent
             fullWidth={true}
diff --git a/src/js/components/create/TextArea.tsx b/src/js/components/create/TextArea.tsx
index 3c496439..a8aaa1b3 100644
--- a/src/js/components/create/TextArea.tsx
+++ b/src/js/components/create/TextArea.tsx
@@ -147,7 +147,7 @@ const TextArea: React.FC<TextAreaProps> = ({
         onKeyDown={onKeyDown}
         onPaste={onPaste}
         onInput={onInput}
-        className="p-2 mt-1 w-full h-12 bg-black focus:ring-blue-500 focus:border-blue-500 block w-full text-lg border-gray-700 rounded-md text-white"
+        className="p-2 mt-1 w-full h-12 bg-black focus:outline-iris-purple block w-full text-lg border-gray-700 rounded-md text-white"
         type="text"
         placeholder={t(placeholder)}
         autoComplete="off"
diff --git a/tailwind.config.js b/tailwind.config.js
index 2184650f..56d9ede7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,9 @@ export default {
         'iris-red': '#f81780',
         'iris-purple': '#8e44ad',
       },
+      outlineColor: {
+        'iris-purple': '#8e44ad',
+      },
       spacing: {
         px: '1px',
       },