diff --git a/src/lib/components/home/awards/Awards.svelte b/src/lib/components/home/awards/Awards.svelte
new file mode 100644
index 0000000..4369b10
--- /dev/null
+++ b/src/lib/components/home/awards/Awards.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    function random(min:number, max:number) {
+        return min + Math.random() * (max + 1 - min);
+    }
+
+    let shapes = ['circle', 'emptyCircle', 'star']
+    let colors = ['extraYellow', 'extraBlue']
+
+    onMount(() => {
+        for(let i = 0; i < 19; i++) {
+            // Set up random elements
+            let xPos = random(1, 95);
+            let yPos = random(0, 100);
+            let size = random(5, 15);
+            let shape = shapes[Math.floor(Math.random()*shapes.length)];
+            let color = colors[Math.floor(Math.random()*colors.length)];
+
+            // create & add
+            const newItem = shape != 'star' ? document.createElement('div') : document.createElement('img');
+            if(shape == 'star'){
+                newItem.setAttribute(
+                    'src', (Math.random() >= 0.5) ? `awards/starBlue.svg` : `awards/starOrange.svg`
+                )
+                newItem.setAttribute(
+                    'alt', `star decoration`
+                )
+            }
+            newItem.style.position = 'absolute';
+            newItem.style.left = xPos + '%';
+            newItem.style.top = yPos + '%';
+            let multipy = (shape == 'star') ? 2.5 : 1;
+            newItem.style.width = size*multipy + 'px';
+            newItem.style.height = size*multipy + 'px';
+            if(shape != 'star'){
+                newItem.className = `hidden md:block border border-extraYellow rounded-full bg-extraYellow ${(shape=='emptyCircle' && color=='extraBlue') ? `border-extraBlue bg-transparent ` : (shape=='emptyCircle') ?  `border-extraYellow ` : ''}`
+            }else{
+                newItem.className = `hidden md:block`
+            }
+            document.getElementById('textAwards')?.appendChild(newItem);
+        }        
+    });
+</script>
+
+<div class='min-h-screen min-w-screen overflow-hidden bg-BG py-12 sm:grid sm:grid-cols-1 sm:place-content-center-center sm:gap-4 lg:gap-0'>
+        <div id='textAwards' class={`relative w-full h-full mb-4 sm:mb-0 font-decorate text-6xl text-center text-extraGold sm:text-8xl sm:mt-0 grid place-content-center`}>
+            <span class="z-10">Awards</span>
+        </div>
+        <div class='w-screen h-fit text-content grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4 divide-y divide-content sm:divide-y-0 lg:divide-x font-light border-y border-content py-7'>
+            <div class='flex flex-col gap-2 px-6 pt-4'>
+                <div class='text-center text-lg font-normal'>WINNER</div>
+                <div class='flex flex-wrap justify-center items-center'>
+                    <img src='/awards/First-place.png' alt='WINNER pic' class='max-w-52 max-h-52'/>
+                </div>
+                <div>
+                    รางวัลชนะเลิศ<br/>
+                    30,000 บาท<br/>
+                    พร้อมโล่รางวัลประกาศเกียรติคุณ
+                </div>
+            </div>
+            <div class='flex flex-col gap-2 px-6 pt-4 sm:border-l'>
+                <div class='text-center text-lg font-normal'>FIRST RUNNER-UP</div>
+                <div class='flex justify-center items-center'>
+                    <img src='/awards/Second-place.png' alt='FIRST RUNNER-UP pic' class='max-w-52 max-h-52'/>
+                </div>
+                <div>
+                    รางวัลรองชนะเลิศอันดับ 1<br/>
+                    15,000 บาท<br/>
+                    พร้อมโล่รางวัลประกาศเกียรติคุณ
+                </div>
+        </div>
+            <div class='flex flex-col gap-2 px-6 pt-4'>
+                <div class='text-center text-lg font-normal'>SECOND RUNNER-UP</div>
+                <div class='flex justify-center items-center'>
+                    <img src='/awards/Third-place.png' alt='SECOND RUNNER-UP pic' class='max-w-52 max-h-52'/>
+                </div>
+                <div>
+                    รางวัลรองชนะเลิศอันดับ 2<br/>
+                    5,000 บาท<br/>
+                    พร้อมโล่รางวัลประกาศเกียรติคุณ
+                </div>
+            </div>
+            <div class='flex flex-col gap-2 px-6 pt-4 sm:border-l'>
+                <div class='text-center text-lg font-normal'>HONORABLE MENTION</div>
+                <div class='flex justify-center items-center'>
+                    <img src='/awards/Honored-place.png' alt='HONORABLE MENTION pic' class='max-w-52 max-h-52'/>
+                </div>
+                <div>
+                    รางวัลชมเชย<br/>
+                    จำนวน 2 รางวัล<br/>
+                    รางวัลละ 2,000 บาท
+                </div>
+            </div>
+        </div>
+</div>
diff --git a/static/awards/First-place.png b/static/awards/First-place.png
new file mode 100644
index 0000000..3aa2d2f
Binary files /dev/null and b/static/awards/First-place.png differ
diff --git a/static/awards/Honored-place.png b/static/awards/Honored-place.png
new file mode 100644
index 0000000..e4bc132
Binary files /dev/null and b/static/awards/Honored-place.png differ
diff --git a/static/awards/Second-place.png b/static/awards/Second-place.png
new file mode 100644
index 0000000..f833462
Binary files /dev/null and b/static/awards/Second-place.png differ
diff --git a/static/awards/Third-place.png b/static/awards/Third-place.png
new file mode 100644
index 0000000..e6d171b
Binary files /dev/null and b/static/awards/Third-place.png differ
diff --git a/static/awards/starBlue.svg b/static/awards/starBlue.svg
new file mode 100644
index 0000000..e0347ad
--- /dev/null
+++ b/static/awards/starBlue.svg
@@ -0,0 +1,6 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line x1="32.3481" y1="2.65012" x2="12.1422" y2="44.2443" stroke='#265BF6'/>
+    <line x1="1.21848" y1="12.6753" x2="42.8131" y2="32.8813" stroke='#265BF6'/>
+    <line y1="-0.5" x2="46.2428" y2="-0.5" transform="matrix(0.945006 -0.327053 0.327061 0.945003 1.29858 30.5742)" stroke='#265BF6'/>
+    <line y1="-0.5" x2="46.2428" y2="-0.5" transform="matrix(0.327061 0.945003 -0.945006 0.327053 14.0168 1)" stroke='#265BF6'/>
+</svg>
diff --git a/static/awards/starOrange.svg b/static/awards/starOrange.svg
new file mode 100644
index 0000000..6ae9a9b
--- /dev/null
+++ b/static/awards/starOrange.svg
@@ -0,0 +1,6 @@
+<svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="53.9029" y1="3.69602" x2="18.9468" y2="75.654" stroke="#FB7500"/>
+<line x1="0.218477" y1="21.5278" x2="72.1771" y2="56.4842" stroke="#FB7500"/>
+<line y1="-0.5" x2="80" y2="-0.5" transform="matrix(0.945006 -0.327053 0.327061 0.945003 0.519531 52.1641)" stroke="#FB7500"/>
+<line y1="-0.5" x2="80" y2="-0.5" transform="matrix(0.327061 0.945003 -0.945006 0.327053 22.5195 1)" stroke="#FB7500"/>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3d50b47..22ef866 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,16 @@ export default {
 		},
 		extend: {
 			colors: {
+				BG: '#FEFCFC',
+				content: '#0D0D02',
+				second: '#D2D2D7',
+				extraBlue: '#265BF6',
+				extraRed: '#AC001A',
+				extraOrange: '#FB7500',
+				extraBrown: '#3A230C',
+				extraYellow: '#FEBB28',
+				extraGold: '#CCAA4B',
+				extraWhite: '#F9F6E8',
 				soapstone: '#fefcfc',
 				asphalt: '#0d0d02',
 				iron: {