diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4606eb5..724706d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,14 @@
     <list default="true" id="b99f40bd-0c41-4f7c-bc44-04335cf20859" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/common/PatientData/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/PatientData/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/patient/PatientForm/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/patient/PatientForm/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/PatientData/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/PatientData/style.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/RecordData/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/RecordData/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/common/RecordData/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/common/RecordData/style.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/pages/login/LoginForm/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/login/LoginForm/style.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/pages/patient/PatientsData/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/patient/PatientsData/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/pages/patient/PatientsData/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/patient/PatientsData/style.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/record/TodayRecord/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/record/TodayRecord/style.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/pages/record/RecordsData/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/record/RecordsData/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/pages/record/RecordsData/style.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/record/RecordsData/style.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -96,7 +100,7 @@
       <workItem from="1652451627565" duration="4449000" />
       <workItem from="1652496930763" duration="1664000" />
       <workItem from="1652519727025" duration="11151000" />
-      <workItem from="1652620153868" duration="5363000" />
+      <workItem from="1652620153868" duration="6946000" />
     </task>
     <servers />
   </component>
diff --git a/public/images/add.svg b/public/images/add.svg
new file mode 100644
index 0000000..3e29cf6
--- /dev/null
+++ b/public/images/add.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>add-plus</title><path class="cls-1" d="M61.44,0A61.44,61.44,0,1,1,0,61.44,61.44,61.44,0,0,1,61.44,0ZM93.79,55.21V67.66a4.63,4.63,0,0,1-4.62,4.62H72.28V89.17a4.63,4.63,0,0,1-4.62,4.62H55.21a4.63,4.63,0,0,1-4.61-4.62V72.28H33.7a4.63,4.63,0,0,1-4.61-4.62V55.21A4.63,4.63,0,0,1,33.7,50.6H50.6V33.7a4.63,4.63,0,0,1,4.61-4.61H67.66a4.63,4.63,0,0,1,4.62,4.61V50.6H89.17a4.63,4.63,0,0,1,4.62,4.61Z"/></svg>
\ No newline at end of file
diff --git a/public/images/delete.svg b/public/images/delete.svg
new file mode 100644
index 0000000..1e13146
--- /dev/null
+++ b/public/images/delete.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.16 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>delete</title><path class="cls-1" d="M11.17,37.16H94.65a8.4,8.4,0,0,1,2,.16,5.93,5.93,0,0,1,2.88,1.56,5.43,5.43,0,0,1,1.64,3.34,7.65,7.65,0,0,1-.06,1.44L94,117.31v0l0,.13,0,.28v0a7.06,7.06,0,0,1-.2.9v0l0,.06v0a5.89,5.89,0,0,1-5.47,4.07H17.32a6.17,6.17,0,0,1-1.25-.19,6.17,6.17,0,0,1-1.16-.48h0a6.18,6.18,0,0,1-3.08-4.88l-7-73.49a7.69,7.69,0,0,1-.06-1.66,5.37,5.37,0,0,1,1.63-3.29,6,6,0,0,1,3-1.58,8.94,8.94,0,0,1,1.79-.13ZM5.65,8.8H37.12V6h0a2.44,2.44,0,0,1,0-.27,6,6,0,0,1,1.76-4h0A6,6,0,0,1,43.09,0H62.46l.3,0a6,6,0,0,1,5.7,6V6h0V8.8h32l.39,0a4.7,4.7,0,0,1,4.31,4.43c0,.18,0,.32,0,.5v9.86a2.59,2.59,0,0,1-2.59,2.59H2.59A2.59,2.59,0,0,1,0,23.62V13.53H0a1.56,1.56,0,0,1,0-.31v0A4.72,4.72,0,0,1,3.88,8.88,10.4,10.4,0,0,1,5.65,8.8Zm42.1,52.7a4.77,4.77,0,0,1,9.49,0v37a4.77,4.77,0,0,1-9.49,0v-37Zm23.73-.2a4.58,4.58,0,0,1,5-4.06,4.47,4.47,0,0,1,4.51,4.46l-2,37a4.57,4.57,0,0,1-5,4.06,4.47,4.47,0,0,1-4.51-4.46l2-37ZM25,61.7a4.46,4.46,0,0,1,4.5-4.46,4.58,4.58,0,0,1,5,4.06l2,37a4.47,4.47,0,0,1-4.51,4.46,4.57,4.57,0,0,1-5-4.06l-2-37Z"/></svg>
\ No newline at end of file
diff --git a/public/images/edit.svg b/public/images/edit.svg
new file mode 100644
index 0000000..b264591
--- /dev/null
+++ b/public/images/edit.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 121.51"><title>edit</title><path d="M28.66,1.64H58.88L44.46,16.71H28.66a13.52,13.52,0,0,0-9.59,4l0,0a13.52,13.52,0,0,0-4,9.59v76.14H91.21a13.5,13.5,0,0,0,9.59-4l0,0a13.5,13.5,0,0,0,4-9.59V77.3l15.07-15.74V92.85a28.6,28.6,0,0,1-8.41,20.22l0,.05a28.58,28.58,0,0,1-20.2,8.39H11.5a11.47,11.47,0,0,1-8.1-3.37l0,0A11.52,11.52,0,0,1,0,110V30.3A28.58,28.58,0,0,1,8.41,10.09L8.46,10a28.58,28.58,0,0,1,20.2-8.4ZM73,76.47l-29.42,6,4.25-31.31L73,76.47ZM57.13,41.68,96.3.91A2.74,2.74,0,0,1,99.69.38l22.48,21.76a2.39,2.39,0,0,1-.19,3.57L82.28,67,57.13,41.68Z"/></svg>
\ No newline at end of file
diff --git a/src/components/common/PatientData/index.tsx b/src/components/common/PatientData/index.tsx
index 2f81abb..85b9592 100644
--- a/src/components/common/PatientData/index.tsx
+++ b/src/components/common/PatientData/index.tsx
@@ -1,5 +1,6 @@
 import { deletePatient } from '@/store/slices/patient'
 import { PatientDataProps } from '@/types/components'
+import Image from 'next/image'
 import React from 'react'
 import { toast } from 'react-toastify'
 
@@ -44,9 +45,21 @@ const PatientData: React.FC<PatientDataProps> = ({
       <Data>{patient.phoneNumber || '-'}</Data>
       <Data>{patient.address || '-'}</Data>
       <Data>
-        <Button onClick={() => onEdit()}>Edit</Button>
+        <Button onClick={() => onEdit()}>
+          <Image
+            src={'/images/edit.svg'}
+            width={20}
+            height={20}
+            alt={'Edit Icon'}
+          />
+        </Button>
         <Button altBg={true} onClick={() => onDelete()}>
-          Delete
+          <Image
+            src={'/images/delete.svg'}
+            width={20}
+            height={20}
+            alt={'Delete Icon'}
+          />
         </Button>
       </Data>
     </>
diff --git a/src/components/common/PatientData/style.ts b/src/components/common/PatientData/style.ts
index f0ce8cc..9a87cc6 100644
--- a/src/components/common/PatientData/style.ts
+++ b/src/components/common/PatientData/style.ts
@@ -1,7 +1,6 @@
-import styled from 'styled-components'
-
-import { blue, mediumPink, white } from '@/styles/colors'
+import { blue, mediumPink } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
+import styled from 'styled-components'
 
 export const Row = styled.div`
   display: grid;
@@ -21,14 +20,19 @@ export const Data = styled.div<{ pointer?: boolean }>`
   display: grid;
   gap: ${spacingS};
   cursor: ${({ pointer }) => (pointer ? 'pointer' : 'default')};
+  align-items: center;
 `
 
 export const Button = styled.div<{ altBg?: boolean }>`
   background-color: ${({ altBg }) => (altBg ? mediumPink : blue)};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
-  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `
diff --git a/src/components/common/RecordData/index.tsx b/src/components/common/RecordData/index.tsx
index 792d903..22fa082 100644
--- a/src/components/common/RecordData/index.tsx
+++ b/src/components/common/RecordData/index.tsx
@@ -3,6 +3,7 @@ import { deleteRecord } from '@/store/slices/record'
 
 import { Record } from '@/types/models'
 import { NextRouter } from 'next/dist/client/router'
+import Image from 'next/image'
 
 import { Button, Data } from './style'
 
@@ -29,9 +30,21 @@ const RecordData = (
       <Data>{record.description || '-'}</Data>
       <Data>{record.honor || '-'}</Data>
       <Data>
-        <Button onClick={() => onEdit()}>Edit</Button>
+        <Button onClick={() => onEdit()}>
+          <Image
+            src={'/images/edit.svg'}
+            width={20}
+            height={20}
+            alt={'Edit Icon'}
+          />
+        </Button>
         <Button altBg={true} onClick={() => onDelete()}>
-          Delete
+          <Image
+            src={'/images/delete.svg'}
+            width={20}
+            height={20}
+            alt={'Delete Icon'}
+          />
         </Button>
       </Data>
     </>
diff --git a/src/components/common/RecordData/style.ts b/src/components/common/RecordData/style.ts
index 1873af9..a676b5c 100644
--- a/src/components/common/RecordData/style.ts
+++ b/src/components/common/RecordData/style.ts
@@ -1,5 +1,5 @@
-import { blue, mediumPink, white } from '@/styles/colors'
-import { spacingM, spacingS } from '@/styles/spaces'
+import { blue, mediumPink } from '@/styles/colors'
+import { spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
 export const Data = styled.div<{ pointer?: boolean }>`
@@ -13,10 +13,14 @@ export const Data = styled.div<{ pointer?: boolean }>`
 
 export const Button = styled.div<{ altBg?: boolean }>`
   background-color: ${({ altBg }) => (altBg ? mediumPink : blue)};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
-  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `
diff --git a/src/components/pages/login/LoginForm/style.ts b/src/components/pages/login/LoginForm/style.ts
index 634e3c3..93307ff 100644
--- a/src/components/pages/login/LoginForm/style.ts
+++ b/src/components/pages/login/LoginForm/style.ts
@@ -5,7 +5,6 @@ import {
   darkGrey2,
   lightGrey,
   orange,
-  pink,
   white,
 } from '@/styles/colors'
 import { spacingM, spacingS, spacingXL, spacingXXL1 } from '@/styles/spaces'
@@ -68,7 +67,7 @@ export const Button = styled.button`
   outline: none;
   border: none;
   cursor: pointer;
-  background-color: ${pink};
+  background-color: ${blue};
   color: ${white};
   padding: 0.5rem 3rem;
   margin-top: 1rem;
diff --git a/src/components/pages/patient/PatientsData/index.tsx b/src/components/pages/patient/PatientsData/index.tsx
index 7525b8c..3838e67 100644
--- a/src/components/pages/patient/PatientsData/index.tsx
+++ b/src/components/pages/patient/PatientsData/index.tsx
@@ -7,6 +7,7 @@ import { getPatients } from '@/store/slices/patient'
 import { PatientResponse } from '@/types/connection'
 
 import { useRouter } from 'next/dist/client/router'
+import Image from 'next/image'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -71,7 +72,14 @@ const PatientsData: React.FC<{ searchTerm?: string }> = ({ searchTerm }) => {
         <Title>Phone Num</Title>
         <Title>Address</Title>
         <Data>
-          <Button onClick={() => onCreate()}>Create</Button>
+          <Button onClick={() => onCreate()}>
+            <Image
+              src={'/images/add.svg'}
+              width={20}
+              height={20}
+              alt={'Add Icon'}
+            />
+          </Button>
         </Data>
       </Row>
       {renderData()}
diff --git a/src/components/pages/patient/PatientsData/style.ts b/src/components/pages/patient/PatientsData/style.ts
index 534cbec..4c079f2 100644
--- a/src/components/pages/patient/PatientsData/style.ts
+++ b/src/components/pages/patient/PatientsData/style.ts
@@ -1,4 +1,4 @@
-import { blue, white } from '@/styles/colors'
+import { blue } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
@@ -20,7 +20,6 @@ export const Row = styled.div<{header?: boolean}>`
 export const Title = styled.div`
   text-align: left;
   font-size: 20px;
-  margin-bottom: ${spacingM};
 `
 
 export const Data = styled.div`
@@ -38,9 +37,14 @@ export const Text = styled.h1`
 
 export const Button = styled.div`
   background-color: ${blue};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `
diff --git a/src/components/pages/record/RecordsData/index.tsx b/src/components/pages/record/RecordsData/index.tsx
index d9b7ba3..800f221 100644
--- a/src/components/pages/record/RecordsData/index.tsx
+++ b/src/components/pages/record/RecordsData/index.tsx
@@ -5,6 +5,8 @@ import { getPatientRecords } from '@/store/slices/record'
 
 import { RecordResponse } from '@/types/connection'
 import { useRouter } from 'next/dist/client/router'
+
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -43,7 +45,12 @@ const RecordsData = () => {
         <Header>#</Header>
         <Header>
           <Button onClick={() => route.replace(`/patient/${id}/form`)}>
-            Create
+            <Image
+              src={'/images/add.svg'}
+              width={20}
+              height={20}
+              alt={'Add Icon'}
+            />
           </Button>
         </Header>
       </Row>
diff --git a/src/components/pages/record/RecordsData/style.ts b/src/components/pages/record/RecordsData/style.ts
index 6d9161b..ba7c9ef 100644
--- a/src/components/pages/record/RecordsData/style.ts
+++ b/src/components/pages/record/RecordsData/style.ts
@@ -1,4 +1,4 @@
-import { blue, lightBlue, white } from '@/styles/colors'
+import { blue, lightBlue } from '@/styles/colors'
 import { spacingM, spacingS } from '@/styles/spaces'
 import styled from 'styled-components'
 
@@ -6,11 +6,12 @@ export const Section = styled.section``
 
 export const Row = styled.div<{header?: boolean}>`
   display: grid;
-  grid-template-columns: 1.5fr 2fr 2fr 2fr 3fr 2fr 0.5fr;
+  grid-template-columns: 1.5fr 2fr 2fr 2fr 3fr 2fr 0.8fr;
   padding: ${spacingM};
   font-weight: ${({ header }) => header ? 'bold' : 'normal'};
   border-bottom: 1px solid ${blue};
   gap: ${spacingS};
+  align-items: center;
   
   :hover {
     background-color: ${({ header }) => !header && lightBlue};
@@ -21,9 +22,14 @@ export const Header = styled.div``
 
 export const Button = styled.div`
   background-color: ${blue};
-  padding: ${spacingS} ${spacingM};
+  padding: ${spacingS} 0;
   border-radius: ${spacingS};
-  text-align: center;
-  color: ${white};
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    filter: invert(100);
+  }
 `