diff --git a/components/GettingStarted.tsx b/components/GettingStarted.tsx
index 908cf5010..6c16eca87 100644
--- a/components/GettingStarted.tsx
+++ b/components/GettingStarted.tsx
@@ -139,26 +139,34 @@ const GettingStarted = () => {
     <>
       <div className='relative'>
         <div className='flex flex-col'>
-          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
+          <div className='flex items-end flex-row justify-between mt-5 mb-3'>
             <h2 className='text-h6 font-semibold mb-1 text-slate-900 dark:text-white'>
               JSON Schema
             </h2>
-            <div className='select-wrap'>
-              <label className='mr-2 max-sm:text-[12px] text-slate-700 dark:text-slate-300'>
+            <div className='select-wrap flex items-center'>
+              <label
+                htmlFor='schema-examples'
+                className='mr-2 max-sm:text-[12px] text-slate-700 dark:text-slate-300'
+              >
                 Select a Schema:
               </label>
-              <select
-                name='Select a JSON Schema Validator'
-                className='p-2 border dark:border-slate-300 border-slate-300 dark:bg-slate-900 bg-white text-slate-800 dark:text-white rounded-md max-sm:text-[12px]'
-                id='Examples'
-                onChange={handleSchemaChange}
-              >
-                {options.map((option: any, id: number) => (
-                  <option key={id} value={option.file}>
-                    {option.name}
-                  </option>
-                ))}
-              </select>
+              <div className='relative'>
+                <select
+                  name='Select a JSON Schema Validator'
+                  className='p-2 pr-8 border dark:border-slate-300 border-slate-300 dark:bg-slate-900 bg-white text-slate-800 dark:text-white rounded-md max-sm:text-[12px] appearance-none cursor-pointer'
+                  id='schema-examples'
+                  onChange={handleSchemaChange}
+                >
+                  {options.map((option: any, id: number) => (
+                    <option key={id} value={option.file}>
+                      {option.name}
+                    </option>
+                  ))}
+                </select>
+                <span className='pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-300 text-xl'>
+                  ▾
+                </span>
+              </div>
             </div>
           </div>
 
@@ -203,26 +211,34 @@ const GettingStarted = () => {
         </div>
 
         <div className='flex flex-col'>
-          <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
+          <div className='flex items-end flex-row justify-between mt-5 mb-3'>
             <h2 className='text-h6 font-semibold mb-1 text-slate-900 dark:text-white'>
               JSON Instance
             </h2>
-            <div className='select-wrap'>
-              <label className='mr-2 max-sm:text-[12px] text-slate-700 dark:text-slate-300'>
+            <div className='select-wrap flex items-center'>
+              <label
+                htmlFor='instance-examples'
+                className='mr-2 max-sm:text-[12px] text-slate-700 dark:text-slate-300'
+              >
                 Select an Instance:
               </label>
-              <select
-                name='Select a JSON Schema Validator'
-                className='p-2 border dark:border-slate-300 border-slate-300 dark:bg-slate-900 bg-white text-slate-800 dark:text-white rounded-md max-sm:text-[12px]'
-                id='Examples'
-                onChange={handleInstanceChange}
-              >
-                {instances.map((instance: any, id: number) => (
-                  <option key={id} value={instance.file}>
-                    {instance.name}
-                  </option>
-                ))}
-              </select>
+              <div className='relative'>
+                <select
+                  name='Select a JSON Schema Validator'
+                  className='p-2 pr-8 border dark:border-slate-300 border-slate-300 dark:bg-slate-900 bg-white text-slate-800 dark:text-white rounded-md max-sm:text-[12px] appearance-none cursor-pointer'
+                  id='instance-examples'
+                  onChange={handleInstanceChange}
+                >
+                  {instances.map((instance: any, id: number) => (
+                    <option key={id} value={instance.file}>
+                      {instance.name}
+                    </option>
+                  ))}
+                </select>
+                <span className='pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-slate-500 dark:text-slate-300 text-xl'>
+                  ▾
+                </span>
+              </div>
             </div>
           </div>
           <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
@@ -290,7 +306,7 @@ const GettingStarted = () => {
         </div>
 
         <button
-          className='absolute right-0 my-4 text-[17px] bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md'
+          className='absolute right-4 my-4 text-[17px] bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md'
           onClick={createZip}
         >
           Download