diff --git a/src/lib/components/ui/cards/pis/PisCode.svelte b/src/lib/components/ui/cards/pis/PisCode.svelte
new file mode 100644
index 0000000..ec84e82
--- /dev/null
+++ b/src/lib/components/ui/cards/pis/PisCode.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let codeValue = $state('');
+
+function resetValues(): void {
+    codeValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Code'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Code"} uppercase={true} type={'number'} max={9999} bind:value={codeValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/ui/cards/pis/PisStartEndCard.svelte b/src/lib/components/ui/cards/pis/PisStartEndCard.svelte
new file mode 100644
index 0000000..4ab9c05
--- /dev/null
+++ b/src/lib/components/ui/cards/pis/PisStartEndCard.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let startValue = $state('');
+let endValue = $state('');
+
+function resetValues(): void {
+    startValue = '';
+    endValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Start/End CRS'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Start"} uppercase={true} maxLength={3} bind:value={startValue} />
+            </div>
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"End"} uppercase={true} maxLength={3} bind:value={endValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/pis/+page.svelte b/src/routes/pis/+page.svelte
index 5129a99..43efc49 100644
--- a/src/routes/pis/+page.svelte
+++ b/src/routes/pis/+page.svelte
@@ -1,5 +1,33 @@
 <script lang="ts">
+    import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
+    import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
 </script>
 
+<div class="card-container">
+    <PisStartEndCard />
+    <PisCode />
+</div>
+
+<div class="result-container">
+
+</div>
+
 <style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+
+    .result-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 5px;
+        justify-content: center;
+        background: var(--color-accent);
+    }
 </style>
\ No newline at end of file